Question

我想显示旋转木马下方所有可用图像的列表，这样当有人点击其中一张图像时，它就成了旋转木马中的主要照片...不太确定如何做到这一点。试图调查，但无法找到任何东西。

Answer 1

为此提供了良好的开源支持。你可以尝试这个：https://github.com/gijsroge/OwlCarousel2-Thumbs

使用默认的owl carousel插件添加它并从您的代码中启用：

$(document).ready(function(){
  $('.owl-carousel').owlCarousel({
    thumbs: true,
    thumbsPrerendered: true
  });
});

添加缩略图（带有data-slider-id属性的链接滑块和缩略图）

<div class="owl-carousel" data-slider-id="1">
    <div>Your Content</div>
    <div>Your Content</div>
    <div>Your Content</div>
    <div>Your Content</div>
</div>
<div class="owl-thumbs" data-slider-id="1">
    <button class="owl-thumb-item">slide 1</button>
    <button class="owl-thumb-item">slide 2</button>
    <button class="owl-thumb-item">slide 3</button>
    <button class="owl-thumb-item">slide 4</button>
</div>

Owl Carousel - 如何显示主旋转木马下方的所有图像？

1 个答案: