正在尝试将 2 Owl 个轮播与不同的项目 no.s 同步

Question

我一直在用这个：

http://owlgraphic.com/owlcarousel/demos/sync.html

但我需要做一个小小的修改，因为第一个轮播需要同时显示 3 张图片，而不是只显示一张，然后中间的图片与第一张对齐。

所以我所做的就是字面意思：

sync1.owlCarousel({
   singleItem : true,
   ...
});

到

sync1.owlCarousel({
    items : 3,
    ...
});

但它完全弄乱了映射？

这里：

https://jsfiddle.net/frez1nLd/9/

Answer 1

您需要指定 itemsDesktop 属性。这允许您预设在特定浏览器宽度下可见的幻灯片数量。

 $("#sync1").owlCarousel({
      autoPlay: 3000,
      items : 3,
      itemsDesktop : [1199,3],
      itemsDesktopSmall : [979,3]
 });

并在第一个旋转木马中添加两个空项目，以使所选项目居中。

  <div id="sync1" class="owl-carousel">
      <div class="item emptyItem"></div>
      <div class="item"><h1>1</h1></div>
      <div class="item"><h1>2</h1></div>
      <div class="item"><h1>3</h1></div>
      <div class="item emptyItem"></div>
 </div>

这是更新后的 FIDDLE

正在尝试将 2 Owl 个轮播与不同的项目 no.s 同步

Trying to sync 2 Owl carousels with different item no.s

html

javascript

css

jquery

owl-carousel