Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to center the images in the Owl Carousel

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

$("#owl-example").owlCarousel({   navigation: true });
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.css"> <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.theme.min.css">  <div id="owl-example" class="owl-carousel">   <div><img src="https://via.placeholder.com/120x120/69c/fff/" alt=""></div>   <div><img src="https://via.placeholder.com/200x200/c69/fff/" alt=""></div>   <div><img src="https://via.placeholder.com/160x160/9c6/fff/" alt=""></div>   <div><img src="https://via.placeholder.com/240x240/fc6/fff/" alt=""></div>   <div><img src="https://via.placeholder.com/160x160/9c6/fff/" alt=""></div>   <div><img src="https://via.placeholder.com/200x200/c69/fff/" alt=""></div>   <div><img src="https://via.placeholder.com/120x120/69c/fff/" alt=""></div> </div>  <script src="//code.jquery.com/jquery-1.12.4.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.js"></script>
like image 587
Gleb Kemarsky Avatar asked Aug 26 '16 11:08

Gleb Kemarsky


People also ask

How do you change the direction of owl carousel?

By adding rtl:true Owl will change direction from Right to left.

What is stage padding in Owl carousel?

Stage padding option adds left and right padding style (in pixels) onto stage-wrapper.

How do you make an owl carousel responsive?

Setting of the responsive is very simple. Structure of responsive option: responsive : { // breakpoint from 0 up 0 : { option1 : value, option2 : value, ... }, // breakpoint from 480 up 480 : { option1 : value, option2 : value, ... }, // breakpoint from 768 up 768 : { option1 : value, option2 : value, ... } }

How to display one image per slider for Owl carousel?

It is not only to show series of pictures in a slider, it is possible to display one image per slider for Owl Carousel also. Normally, the slider is called by the codes, the options can be passed by an object, like images loop. $(document).ready(function(){ $(".owl-carousel").owlCarousel({ loop:true

How to add class on Owl Carousel Center item using jQuery?

In this article we will discuss about add class on owl carousel center item. Let’s start how to add a class and add some effect on center item of a carousel slider jQuery. First link owl carousel min JS. Then add this code. Here center: true is to add class on your slider.

What is owl carousel slider in Laravel Vue JS?

Some of its core features are responsiveness, touch, drag ‘n’ drop support, supports modern browsers not only but also supports zombie browsers. This Laravel Vue js owl carousel slider example covers all the profound steps, respectively to dynamically fetch images from the database and display in slider using owl carousel slider in Laravel.

How do I Center a carousel in a table cell?

To obtain a horizontal alignment, you can simply add text-align: center; property to each .owl-item > div. To align vertically, you can turn the carousel items in table cells. But do not forget to cancel the float property for them. Let us arrange all of the changes as a new .owl-centered class.


1 Answers

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; }
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.carousel.min.css" rel="stylesheet"/>  <div class="owl-carousel">     <div class="item">       <img src="https://via.placeholder.com/350x200/?text=1">       <div class="caption">Caption 1</div>     </div>     <div class="item">       <img src="https://via.placeholder.com/255x200/?text=2">       <div class="caption">Caption 2</div>     </div>     <div class="item">       <img src="https://via.placeholder.com/627x200/?text=3">       <div class="caption">Caption 3</div>     </div>     <div class="item">       <img src="https://via.placeholder.com/627x300/?text=4">       <div class="caption">Caption 4</div>     </div>     <div class="item">       <img src="https://via.placeholder.com/627x400/?text=5">       <div class="caption">Caption 5</div>     </div>     <div class="item">       <img src="https://via.placeholder.com/255x200/?text=6">       <div class="caption">Caption 6</div>     </div> </div>  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/owl.carousel.min.js"></script>
like image 67
xavier bs Avatar answered Sep 16 '22 12:09

xavier bs