中心对齐猫头鹰旋转木马项目答案

【问题标题】：Center align owl carousel items中心对齐猫头鹰旋转木马项目
【发布时间】：2020-08-02 19:05:48
【问题描述】：

如何在屏幕中间对齐这个 owl 项目？

已尝试：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

【问题讨论】：

更改循环true
@LaljiTadhani 对不起.. 不需要循环项目。
@LaljiTadhani 您不需要编辑答案，只需在 cmets 中分享链接
@AnuragSrivastava 立即查看
在owlcarousel2.github.io/OwlCarousel2/demos/center.html查看演示

标签： javascript jquery html css owl-carousel

【解决方案1】：

将此添加到您的 css 中：

.owl-carousel{
    display: flex !important;  // to override display:bloc i added !important
    flex-direction: row;   
    justify-content: center;  // to center you carousel
}

JSFiddle : https://jsfiddle.net/2z1qadv3/

【讨论】：

你自己试过了吗？
我添加了 jsfiddle
@vishnu 使用flexbox 后您将无法获得任何轮播效果，那么您为什么还要使用 owlcarousel？只需制作 2 个简单的 div
@AnuragSrivastava 在这种情况下效果仅在小屏幕设备中可见，如果它有 7 个或更多项目（动态控制），应该能够滚动带有轮播效果的项目。

【解决方案2】：

轮播是页面的整个宽度，因此它已经居中。如果您希望它小于全宽，您可以将 width 样式添加到 .owl-carousel 并将整个内容放入带有 justify-content:center 的 flexbox 中。

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

【讨论】：

【解决方案3】：

您无需将 owl-carousel 更改为 display: flex 和 justify content: center。猫头鹰圆点容器位于猫头鹰旋转木马内。所以将容器的宽度设置为 100% & justify-content: center。这仅影响容器内的点。这是层次结构。

猫头鹰旋转木马
|__owl-dots
|___猫头鹰点

这是一个在任何地方手动定位点的示例代码。

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

【讨论】：