javascript - Center align owl carousel items - Stack Overflow

admin管理员组

文章数量:1290266

How can I align this owl items in the middle of the screen?

Tried: center: true

Please see in full page view:

var owl = $('.video-thumb').owlCarousel({
  items: 7,
  autoplay: false,
  loop: false,
  nav: true,
  dots: false,
  margin: 30,
  center: true,
  responsive: {
    0: {
      items: 1
    },
    640: {
      items: 2
    },
    768: {
      items: 3
    },
    992: {
      items: 4
    },
    1200: {
      items: 5
    },
    1600: {
      items: 7
    }
  }
});

<link href=".carousel.min.css" rel="stylesheet"/>
<link href=".theme.default.min.css" rel="stylesheet"/>
<script src=".min.js"></script>
<script src=".carousel.js"></script>
<div class="video-thumb owl-carousel owl-theme">
  <div class="thumb-item">
    <a href="#"><img src="" alt="eMAM Cloud" /></a>
  </div>
  <div class="thumb-item">
    <a href="#"><img src="" alt="eMAM Cloud" /></a>
  </div>
</div>

How can I align this owl items in the middle of the screen?

Tried: center: true

Please see in full page view:

var owl = $('.video-thumb').owlCarousel({
  items: 7,
  autoplay: false,
  loop: false,
  nav: true,
  dots: false,
  margin: 30,
  center: true,
  responsive: {
    0: {
      items: 1
    },
    640: {
      items: 2
    },
    768: {
      items: 3
    },
    992: {
      items: 4
    },
    1200: {
      items: 5
    },
    1600: {
      items: 7
    }
  }
});

<link href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.carousel.min.css" rel="stylesheet"/>
<link href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.theme.default.min.css" rel="stylesheet"/>
<script src="https://owlcarousel2.github.io/OwlCarousel2/assets/vendors/jquery.min.js"></script>
<script src="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/owl.carousel.js"></script>
<div class="video-thumb owl-carousel owl-theme">
  <div class="thumb-item">
    <a href="#"><img src="https://via.placeholder./150" alt="eMAM Cloud" /></a>
  </div>
  <div class="thumb-item">
    <a href="#"><img src="https://via.placeholder./150" alt="eMAM Cloud" /></a>
  </div>
</div>

It may contains any number of items.

JSFiddle

• javascript
• jquery
• html
• css
• owl-carousel

Share Improve this question Follow edited Apr 20, 2020 at 10:10 vishnu asked Apr 20, 2020 at 10:00 vishnuvishnu 2,94844 gold badges3131 silver badges5656 bronze badges 10

• changes loop true – Lalji Tadhani Commented Apr 20, 2020 at 10:05
• @LaljiTadhani Sorry.. no need to loop items. – vishnu Commented Apr 20, 2020 at 10:06
• @LaljiTadhani You didn't need to edit the answer, just share link in the ments – Anurag Srivastava Commented Apr 20, 2020 at 10:09
• @AnuragSrivastava check now – Lalji Tadhani Commented Apr 20, 2020 at 10:11
• Check demo on owlcarousel2.github.io/OwlCarousel2/demos/center.html – Lalji Tadhani Commented Apr 20, 2020 at 10:11

 |  Show 5 more ments

3 Answers 3

Sorted by: Reset to default 5

Add this to your CSS:

.owl-carousel {
    display: flex !important; /* To override display:block I added !important */
    flex-direction: row;
    justify-content: center; /* To center the carousel */
}

JSFiddle : https://jsfiddle/2z1qadv3/

You don't need to change owl-carousel to display: flex & justify content: center. Owl dots container is inside the owl-carousel. So set the width of the container to 100% & justify-content: center. This affects only to dots inside the container. Here is the hierarchy.

owl-carousel
|__owl-dots
|___owl-dot

Here is an example code to manually position dots in anywhere.

#my-carousel .owl-dots {
    position: absolute;
    width: 100%;
    bottom: 12%;
    display: flex;
    justify-content: center;
}

The carousel is the full width of the page, so it's already centered. If you want it less than full width you can add width style to the .owl-carousel and put the whole thing in a flexbox with justify-content:center.

https://jsfiddle/o0yk9rbh/6/

本文标签： javascriptCenter align owl carousel itemsStack Overflow