尝试将 2 个猫头鹰轮播与不同的项目编号同步

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

本文关键字：项目 同步 编号 猫头鹰      更新时间：2023-09-26

我一直在使用这个：

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

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

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

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

自

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

但它完全搞砸了映射？

这里：

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

您需要指定 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>

这是更新的小提琴

相关文章：