猫头鹰旋转木马-如何显示所有的图像下面的主要旋转木马 - Owl Carousel - How to show all the images underneath the main carousel?

Owl Carousel - How to show all the images underneath the main carousel?

我想显示所有可用图像的列表下面的旋转木马，这样当有人点击其中一个图像它成为主照片在旋转木马…我不太确定该怎么做。

对此有很好的开源支持。你可以试试这个: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>