<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);
});
});
