How to center the images in the Owl Carousel

The Owl Carousel creates additional blocks within your layout. To add CSS properties correctly, you need to work with this HTML structure:

<div id="owl-demo" class="owl-carousel owl-theme">
  <div class="owl-wrapper-outer">
    <div class="owl-wrapper">
      <div class="owl-item">
        <div>
          <img src="" alt="">
        </div>
      </div>
      <div class="owl-item">
        <div>
          <img src="" alt="">
        </div>
      </div>
    </div>
  </div>
</div>

Moreover the carousel adds a style attribute to all blocks. For example, a block with the .owl-wrapper class receives the display property with the value of block. So you have to use an !important declaration in your CSS.
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.

screenshot

Let us arrange all of the changes as a new .owl-centered class. Please check the result:

Owl Carousel 2.3.4: https://codepen.io/glebkema/pen/vYKMgzj
Owl Carousel 1.3.3: https://codepen.io/glebkema/pen/BzgZxX

$("#owl-example").owlCarousel({
  navigation: true
});

@import url('//cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.css');
@import url('//cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.theme.min.css');

.owl-centered .owl-wrapper {
  display: table !important;
}
.owl-centered .owl-item {
  display: table-cell;
  float: none;
  vertical-align: middle;
}
.owl-centered .owl-item > div {
  text-align: center;
}

<div id="owl-example" class="owl-carousel owl-centered">
  <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>

This works for me:

@media (max-width:500px) {
    .owl-carousel .owl-item {
        text-align:center;
    }
    .owl-carousel .item {
        float: none;
        display: inline-block;
    }
}

You might adjust it to your HTML though, but the idea is that you text-align a parent, and float:none and display:inline-block the child that holds the content, on mobile:

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>

How to center the images in the Owl Carousel

Tags:

Html

Css

Centering

Carousel

Owl Carousel

Related

Recent Posts