下一个和上一个按钮猫头鹰轮播的缩略图

Question

>有谁知道如果使用猫头鹰轮播，我们可以使用下一个和上一个图像的缩略图来代替下一个和上一个箭头。

示例：https://www.solebox.com/

如果没有，任何其他执行此工作的 jQuery 滑块都将是非常有用的信息！

Answer 1

您可以从 Owl Carousel 2 实现上述功能。您必须具有以下自定义功能才能显示上一个，下一个图像。

var mainSlider;
$(document).ready(function() {
  mainSlider = $('.owl-carousel');
  mainSlider.owlCarousel({
    autoplay: true,
    autoplayTimeout: 5000,
    lazyLoad: true,
    loop: true,
    items: 1,
    smartSpeed: 500,
  });
  mainSlider.on('changed.owl.carousel', function(property) {
    var current = property.item.index;
    var prev = $(property.target).find(".owl-item").eq(current).prev().find("img").attr('data-navipicture');
    var next = $(property.target).find(".owl-item").eq(current).next().find("img").attr('data-navipicture');
    $('.navPrev').find('img').attr('src', prev);
    $('.navNext').find('img').attr('src', next);
  });
});
$('.navNext').on('click', function() {
  mainSlider.trigger('next.owl.carousel', [300]);
  return false;
});
$('.navPrev').on('click', function() {
  mainSlider.trigger('prev.owl.carousel', [300]);
  return false;
});

.navPrev {
  position: absolute;
  top: 40%;
  left: 15px;
  z-index: 2;
  width: 100px;
  height: 100px;
  background-size: 100px 100px;
}
.navPrev:hover {
  top: 39%;
  left: 8px;
  width: 118px;
  height: 118px;
  background-size: 118px 118px;
}
.navPrev span {
  width: 100px;
  height: 100px;
  display: table-cell;
  vertical-align: middle;
  cursor: pointer;
}
.navPrev:hover span {
  width: 118px;
  height: 118px;
}
.navPrev span img {
  position: relative;
  margin: auto 0px;
  cursor: pointer;
  width: 100px;
  height: 100px;
}
.navPrev:hover span img {
  width: 118px;
  height: 118px;
}
.navNext {
  position: absolute;
  top: 40%;
  right: 15px;
  z-index: 2;
  width: 100px;
  height: 100px;
  background-size: 100px 100px;
}
.navNext:hover {
  top: 39%;
  right: 8px;
  width: 118px;
  height: 118px;
  background-size: 118px 118px;
}
.navNext span {
  width: 100px;
  height: 100px;
  display: table-cell;
  vertical-align: middle;
  cursor: pointer;
}
.navNext:hover span {
  width: 118px;
  height: 118px;
}
.navNext span img {
  position: relative;
  margin: auto 0px;
  cursor: pointer;
  width: 100px;
  height: 100px;
}
.navNext:hover span img {
  width: 118px;
  height: 118px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/owl.carousel.js"></script>
<link href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.carousel.min.css" rel="stylesheet" />
<div class="owl-carousel">
  <div class="item">
    <a href="#"> <img src="https://placeimg.com/640/480/animals" alt="" data-navipicture="https://placeimg.com/640/480/animals">
    </a>
  </div>
  <div class="item">
    <a href="#"> <img src="https://placeimg.com/640/480/arch" alt="" data-navipicture="https://placeimg.com/640/480/arch">
    </a>
  </div>
  <div class="item">
    <a href="#"> <img src="https://placeimg.com/640/480/nature" alt="" data-navipicture="https://placeimg.com/640/480/nature">
    </a>
  </div>
</div>
<div class="navPrev">
  <span>
                <img src="https://placeimg.com/640/480/animals" alt="">
            </span>
</div>
<div class="navNext">
  <span>
                <img src="https://placeimg.com/640/480/arch" alt="">
            </span>
</div>