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

Question

我有以下owl carousel同thumbnail bar.

这里使用的技术,

1. 猫头鹰旋转木马2.3.4
2. 猫头鹰旋转木马拇指

$('.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');
});