javascript - 下一个和上一个按钮 Owl Carousel 的缩略图

Question

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

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

如果没有，任何其他执行此工作的 jquery slider 都将是非常有用的信息!

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>