owl-carousel-2 - 猫头鹰旋转木马水平缩略图栏 - 添加导航

Question

我有以下 owl carousel与 thumbnail bar .

这里使用的技术，

Owl Carousel 2.3.4

Owl carousel Thumbs

$('.sv-slider .owl-carousel').owlCarousel({
  autoplay: false,
  autoplayHoverPause: true,
  dots: false,
  nav: true,
  thumbs: true,
  thumbImage: true,
  thumbsPrerendered: true,
  thumbContainerClass: 'owl-thumbs',
  thumbItemClass: 'owl-thumb-item',
  loop: true,
  navText: [
    "<i class='fa fa-chevron-left' aria-hidden='true'></i>",
    "<i class='fa fa-chevron-right' aria-hidden='true'></i>"
  ],
  items: 1,
  responsive: {
    0: {
      items: 1,
    },
    768: {
      items: 1,
    },
    992: {
      items: 1,
    }
  }
});

.sv-slider-item img {
  width: 100%;
  height: 200px;
}

.sv-slider .owl-thumbs {
  white-space: nowrap;
  overflow: auto;
}

.owl-thumbs button>img {
  width: 200px;
  height: 100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/owl.carousel2.thumbs@0.1.8/dist/owl.carousel2.thumbs.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" rel="stylesheet" />





<div class="sv-slider">
  <div class="owl-carousel" data-slider-id="1">
    <div class="sv-slider-item">
      <img src="https://cdn.mmaweekly.com/wp-content/uploads/2017/08/WME-IMG-750x370-748x370.jpg" alt="">
    </div>
    <div class="sv-slider-item">
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSS50lYMo-3vCNMfn31Rh2VmAtp2pAZuHSPv_KtJCpqLprrdpX46A" alt="">
    </div>
    <div class="sv-slider-item">
      <img src="https://cdn.mmaweekly.com/wp-content/uploads/2017/08/WME-IMG-750x370-748x370.jpg" alt="">
    </div>
    <div class="sv-slider-item">
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSS50lYMo-3vCNMfn31Rh2VmAtp2pAZuHSPv_KtJCpqLprrdpX46A" alt="">
    </div>
    <div class="sv-slider-item">
      <img src="https://cdn.mmaweekly.com/wp-content/uploads/2017/08/WME-IMG-750x370-748x370.jpg" alt="">
    </div>
  </div>
  <div class="owl-thumbs" data-slider-id="1">

  </div>
</div>

正如您在代码段中看到的那样，它运行良好，但在这里我需要进行简单的修改。

我想避免 horizontal scroll-bar用于缩略图并添加导航图标 <和 >在两端表现良好。

Answer 1

我不知道 Owl Carousel Thumbs，但正如@lucascaro 建议的那样，您只需为这些缩略图使用另一个轮播，并添加适当的事件处理程序。

假设#oc1 是您的顶级轮播，#oc2 是您的缩略图轮播。
你可以这样写:

$('#oc2 .item').click(function () {
    $('#oc1').trigger('to.owl.carousel', $(this).data('slide'));
});

其中 data('slide') 是一些数据属性，例如data-slide="1"，您放入缩略图轮播的每张幻灯片。

关于左右导航按钮，您在自己的 HTML 中编写按钮并附加这样的点击事件:

$('.left').click(function () {
    $('#oc2').trigger('prev.owl.carousel');
});
$('.right').click(function () {
    $('#oc2').trigger('next.owl.carousel');
});