OwlCarousel Gallery double “Sync” Slider Active. all code

//CDN Owl Carousel
<script src=”https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.0.0-beta.3/owl.carousel.min.js”></script>
<link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.0.0-beta.3/assets/owl.carousel.min.css”>
<link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.0.0-beta.3/assets/owl.theme.default.min.css”>

//Js start
$(document).ready(function() {
var bigimage = $(“#big”);
var thumbs = $(“#thumbs”);
//var totalslides = 10;
var syncedSecondary = true;

bigimage
.owlCarousel({
items: 1,
slideSpeed: 2000,
nav: true,
// autoplay: true,
dots: false,
loop: true,
responsiveRefreshRate: 200,
navText: [“<i class=’zmdi zmdi-chevron-left’></i>”, “<i class=’zmdi zmdi-chevron-right’></i>”],
})
.on(“changed.owl.carousel”, syncPosition);

thumbs
.on(“initialized.owl.carousel”, function() {
thumbs
.find(“.owl-item”)
.eq(0)
.addClass(“current”);
})
.owlCarousel({
items: 8,
dots: true,
nav: false,
smartSpeed: 200,
slideSpeed: 500,
slideBy: 4,
responsiveRefreshRate: 100
})
.on(“changed.owl.carousel”, syncPosition2);

function syncPosition(el) {
//if loop is set to false, then you have to uncomment the next line
//var current = el.item.index;

//to disable loop, comment this block
console.log(el);
var count = el.item.count – 1;
var current = Math.round(el.item.index – el.item.count / 2 – 0.5);

if (current < 0) {
current = count;
}
if (current > count) {
current = 0;
}
//to this
thumbs
.find(“.owl-item”)
.removeClass(“current”)
.eq(current)
.addClass(“current”);
var onscreen = thumbs.find(“.owl-item.active”).length – 1;
console.log(onscreen)
var start = thumbs
.find(“.owl-item.active”)
.first()
.index();
var end = thumbs
.find(“.owl-item.active”)
.last()
.index();
console.log(end);
if (current > end) {
thumbs.data(“owl.carousel”).to(current, 100, true);
}
if (current < start) {
thumbs.data(“owl.carousel”).to(current – onscreen, 100, true);
}
}

function syncPosition2(el) {
if (syncedSecondary) {
var number = el.item.index;
bigimage.data(“owl.carousel”).to(number, 100, true);
}
}

thumbs.on(“click”, “.owl-item”, function(e) {
e.preventDefault();
var number = $(this).index();
bigimage.data(“owl.carousel”).to(number, 300, true);
});
});
//Js End

//Html Start
<!– Photo gallery start –>
<div class=”photo-gallery”>
<div class=”container”>
<div class=”row”>
<div class=”col-md-12″>
<div class=”gallery-bg outer”>
<div id=”big” class=”gallery-slide owl-carousel owl-theme”>
<div class=”gallery-single-slide”>
<img src=”assets/img/gallery-img1.jpg” alt=””>
</div>
<div class=”gallery-single-slide”>
<img src=”assets/img/gallery-img1.jpg” alt=””>
</div>
<div class=”gallery-single-slide”>
<img src=”assets/img/gallery-img1.jpg” alt=””>
</div>
<div class=”gallery-single-slide”>
<img src=”assets/img/gallery-img1.jpg” alt=””>
</div>
<div class=”gallery-single-slide”>
<img src=”assets/img/gallery-img1.jpg” alt=””>
</div>
<div class=”gallery-single-slide”>
<img src=”assets/img/gallery-img1.jpg” alt=””>
</div>
<div class=”gallery-single-slide”>
<img src=”assets/img/gallery-img1.jpg” alt=””>
</div>
<div class=”gallery-single-slide”>
<img src=”assets/img/gallery-img1.jpg” alt=””>
</div>
</div>
<div class=”gallery-all-image”>
<div class=”row”>
<div id=”thumbs” class=”owl-carousel owl-theme”>
<div class=”item”>
<img src=”assets/img/gallery-img2.jpg” alt=””>
</div>
<div class=”item”>
<img src=”assets/img/gallery-img3.jpg” alt=””>
</div>
<div class=”item”>
<img src=”assets/img/gallery-img4.jpg” alt=””>
</div>
<div class=”item”>
<img src=”assets/img/gallery-img5.jpg” alt=””>
</div>
<div class=”item”>
<img src=”assets/img/gallery-img6.jpg” alt=””>
</div>
<div class=”item”>
<img src=”assets/img/gallery-img7.jpg” alt=””>
</div>
<div class=”item”>
<img src=”assets/img/gallery-img8.jpg” alt=””>
</div>
<div class=”item”>
<img src=”assets/img/gallery-img9.jpg” alt=””>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!– gallery end –>
//Html End

//Css start

.gallery-all-image .owl-item .item, .gallery-all-image .owl-item .item img {
height: 100%;
width: 100%;
}

#sync1 .item{
background: #0c83e7;
padding: 80px 0px;
margin: 5px;
color: #FFF;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
text-align: center;
}
#sync2 .item{
background: #C9C9C9;
padding: 10px 0px;
margin: 5px;
color: #FFF;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
text-align: center;
cursor: pointer;
}
#sync2 .item h1{
font-size: 18px;
}
#sync2 .synced .item{
background: #0c83e7;
}

.owl-dots div.active {
background: #fff;
}

.gallery-all-image .col-md-3 {
margin: 10px 0px;
padding-right: 10px;
padding-left: 10px;
}

.gallery-slide {
margin-bottom: 20px;
}

.gallery-all-image img {
width: 100%;
}

.gallery-all-image .owl-item {
width: 25% !important;
height: 170px;
padding: 10px;
cursor: pointer;
}

.gallery-all-image .owl-item .item,
.gallery-all-image .owl-item .item img {
height: 100%;
width: 100%;
cursor: pointer;
}

.gallery-all-image .owl-item .item{
transform: .4s;
}

.gallery-all-image .owl-item.current .item{
opacity: .6;
}
.gallery-bg {
background: #f5f6f6;
padding: 50px;
}

.gallery-all-image {
padding: 5px;
}
.gallery-slide .owl-nav div {
position: absolute;
left: -44px;
top: 50%;
background: none;
transform: translateY(-50%);
}

.gallery-slide .owl-nav .owl-next {
left: auto;
right: -44px;
}

.gallery-slide .owl-nav div i {
font-size: 23px;
}

.gallery-slide.owl-theme .owl-nav [class*=owl-] {
background: #f06b0a;
height: 30px;
width: 30px;
transition: .4s;
}

.gallery-slide.owl-theme .owl-nav [class*=owl-]:hover {
background: #111;
}
.photo-gallery {
margin-bottom: 70px;
}

//Css end