javascript - 尝试同步 2 个具有不同元素编号的 Owl Carousel

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