下一個和上一個按鈕owl carousel的縮略圖

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>