"owl carousel thumb slider"
Bootstrap 4.1.1 Snippet by MPJJ

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css"> <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script> <div id="slider" class="owl-carousel product-slider"> <div class="item"> <img src="https://i.picsum.photos/id/866/1600/550.jpg" /> </div> <div class="item"> <img src="https://i.picsum.photos/id/867/1600/550.jpg" /> </div> <div class="item"> <img src="https://i.picsum.photos/id/868/1600/550.jpg" /> </div> <div class="item"> <img src="https://i.picsum.photos/id/869/1600/550.jpg" /> </div> <div class="item"> <img src="https://i.picsum.photos/id/870/1600/550.jpg" /> </div> <div class="item"> <img src="https://i.picsum.photos/id/871/1600/550.jpg" /> </div> <div class="item"> <img src="https://i.picsum.photos/id/872/1600/550.jpg" /> </div> <div class="item"> <img src="https://i.picsum.photos/id/873/1600/550.jpg" /> </div> </div> <div id="thumb" class="owl-carousel product-thumb"> <div class="item"> <img src="https://i.picsum.photos/id/866/300/220.jpg" /> </div> <div class="item"> <img src="https://i.picsum.photos/id/867/300/220.jpg" /> </div> <div class="item"> <img src="https://i.picsum.photos/id/868/300/220.jpg" /> </div> <div class="item"> <img src="https://i.picsum.photos/id/869/300/220.jpg" /> </div> <div class="item"> <img src="https://i.picsum.photos/id/870/300/220.jpg" /> </div> <div class="item"> <img src="https://i.picsum.photos/id/871/300/220.jpg" /> </div> <div class="item"> <img src="https://i.picsum.photos/id/872/300/220.jpg" /> </div> <div class="item"> <img src="https://i.picsum.photos/id/873/300/220.jpg" /> </div> </div>
.owl-nav button { position: absolute; top: 50%; transform: translate(0, -50%); outline: none; } .owl-nav button svg { width: 35px; height: 35px; } .owl-nav button.owl-prev { left: 25px; } .owl-nav button.owl-next { right: 25px; } .owl-nav button span { font-size: 45px; }
$(document).ready(function() { var slider = $("#slider"); var thumb = $("#thumb"); var slidesPerPage = 4; //globaly define number of elements per page var syncedSecondary = true; slider.owlCarousel({ items: 1, slideSpeed: 2000, nav: true, autoplay: false, dots: true, loop: true, responsiveRefreshRate: 200, navText: ['<svg width="100%" height="100%" viewBox="0 0 11 20"><path style="fill:none;stroke-width: 1px;stroke: #000;" d="M9.554,1.001l-8.607,8.607l8.607,8.606"/></svg>', '<svg width="100%" height="100%" viewBox="0 0 11 20" version="1.1"><path style="fill:none;stroke-width: 1px;stroke: #000;" d="M1.054,18.214l8.606,-8.606l-8.606,-8.607"/></svg>'], }).on('changed.owl.carousel', syncPosition); thumb .on('initialized.owl.carousel', function() { thumb.find(".owl-item").eq(0).addClass("current"); }) .owlCarousel({ items: slidesPerPage, dots: true, nav: true, item: 4, smartSpeed: 200, slideSpeed: 500, slideBy: slidesPerPage, responsiveRefreshRate: 100 }).on('changed.owl.carousel', syncPosition2); function syncPosition(el) { var count = el.item.count - 1; var current = Math.round(el.item.index - (el.item.count / 2) - .5); if (current < 0) { current = count; } if (current > count) { current = 0; } thumb .find(".owl-item") .removeClass("current") .eq(current) .addClass("current"); var onscreen = thumb.find('.owl-item.active').length - 1; var start = thumb.find('.owl-item.active').first().index(); var end = thumb.find('.owl-item.active').last().index(); if (current > end) { thumb.data('owl.carousel').to(current, 100, true); } if (current < start) { thumb.data('owl.carousel').to(current - onscreen, 100, true); } } function syncPosition2(el) { if (syncedSecondary) { var number = el.item.index; slider.data('owl.carousel').to(number, 100, true); } } thumb.on("click", ".owl-item", function(e) { e.preventDefault(); var number = $(this).index(); slider.data('owl.carousel').to(number, 300, true); }); });

Related: See More


Questions / Comments: