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

Question

Does anyone know if using owl carousel we can use thumbnails of next and previous image in place of next and previous arrows.

Example: https://www.solebox.com/

if not, any other jquery slider that does this job would be really helpful information!

Answer 1

You could achieve above functionality from Owl Carousel 2 . You have to have below custom function to show the prev, next images.

 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>