下一个和上一个按钮owl轮播的缩略图

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>