Question

我有以下declare module 'my-module' { export class Foo { ... } export class Bar { ... } export class Baz { ... } }和owl carousel。

此处使用的技术

thumbnail bar

$('.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-attribute，例如data-slide =“ 1”，则将您放入缩略图轮播的每个幻灯片中。

关于左右导航按钮，您可以使用自己的HTML编写按钮，并附加如下所示的click事件：

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

猫头鹰传送带水平缩略图栏-添加导航

1 个答案: