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个猫头鹰转盘与不同的项目号

1 个答案: