我一直在用这个:
http://owlgraphic.com/owlcarousel/demos/sync.html
但我需要做一个小小的修改,因为第一个轮播需要同时显示 3 张图片,而不是只显示一张,然后中间的图片与第一张对齐。
所以我所做的就是字面意思:
sync1.owlCarousel({
singleItem : true,
...
});
到
sync1.owlCarousel({
items : 3,
...
});
但它完全搞乱了映射?
这里:
最佳答案
您需要指定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
关于javascript - 尝试同步 2 个具有不同元素编号的 Owl Carousel ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34875707/