How to center the images in the Owl Carousel

Question

My Owl Carousel contains pictures of different width and height. How do I align them in the middle - both horizontally and vertically?

Answer 1

With owl carousel version 2.1.1 and CSS3 Flexbox, just add the style:

.owl-carousel .owl-stage {
  display: flex;
  align-items: center;
}

See the snippet:

$( document ).ready( function() {
  $( '.owl-carousel' ).owlCarousel({
     autoplay: true,
     margin: 2,
     loop: true,
     responsive: {
        0: {
           items:1
        },
        200: {
           items:3
        },
        500: {
           items:4
        }
     }
  });
});

.owl-carousel .owl-stage {
  display: flex;
  align-items: center;
}

.owl-carousel .caption {
  text-align: center;
}

    

      
      
Caption 1
    
    

      
      
Caption 2
    
    

      
      
Caption 3
    
    

      
      
Caption 4
    
    

      
      
Caption 5
    
    

      
      
Caption 6