居中对齐猫头鹰走马灯元素

Question

如何将这些猫头鹰项目居中显示在屏幕中间？

尝试过：center: true

请在完整页面视图中查看：

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.com/150" alt="eMAM Cloud" /></a>
  </div>
  <div class="thumb-item">
    <a href="#"><img src="https://via.placeholder.com/150" alt="eMAM Cloud" /></a>
  </div>
</div>

它可能包含任意数量的项目。

JSFiddle

- vishnu

---

更改循环true - Lalji Tadhani

@LaljiTadhani 抱歉... 不需要循环项目。 - vishnu

@LaljiTadhani 你不需要编辑答案，只需在评论中分享链接。 - Anurag Srivastava

由于动态数据的原因，有时会显示两个项目。 - vishnu

@AnuragSrivastava 为什么要给我点踩？我的问题没有任何不清楚的地方。 - vishnu

Answer 1

将此添加到您的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.net/2z1qadv3/

- Aymen TAGHLISSIA

---

你自己试过了吗？ - Anurag Srivastava

我添加了JSFiddle。 - Aymen TAGHLISSIA

@vishnu 使用flexbox后，你将无法获得任何旋转木马效果，那你为什么还要使用owlcarousel呢？只需创建两个简单的div即可。 - Anurag Srivastava

在这种情况下，@AnuragSrivastava，效果只在小屏幕设备上可见，如果有7个或更多项目（动态控件），应该能够使用旋转木马效果滚动项目。 - vishnu

Answer 2

你不需要将owl-carousel更改为display: flex&justify-content: center。 Owl点容器位于owl-carousel内部。因此，将容器的宽度设置为100%和justify-content: center。这仅影响容器内的点。以下是层次结构。 owl-carousel
|__owl-dots
|___owl-dot 以下是手动定位点的示例代码。

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

- Dinith Rukshan Kumara

Answer 3

旋转木马占据整个页面的宽度，因此已经居中。如果你想让它不要占满整个页面，可以给.owl-carousel添加width样式，并将整个部分放在一个具有justify-content:center属性的弹性盒子中。

https://jsfiddle.net/o0yk9rbh/6/

- Mark Potter