Codehints | Sync two owlCarousel using version 2 Updated.

Sync two owlCarousel using version 2 Updated.

<div id=”slider” class=”owl-carousel”>
<div class=”item”><img src=”http://placehold.it/350×150&text=1″ /></div>
<div class=”item”><img src=”http://placehold.it/350×150&text=2″ /></div>
<div class=”item”><img src=”http://placehold.it/350×150&text=3″ /></div>
<div class=”item”><img src=”http://placehold.it/350×150&text=4″ /></div>
<div class=”item”><img src=”http://placehold.it/350×150&text=5″ /></div>
<div class=”item”><img src=”http://placehold.it/350×150&text=6″ /></div>
<div class=”item”><img src=”http://placehold.it/350×150&text=7″ /></div>
<div class=”item”><img src=”http://placehold.it/350×150&text=8″ /></div>
</div>
<div id=”thumbnails” class=”owl-carousel”>
<div class=”item”><img src=”http://placehold.it/80×80&text=1″ /></div>
<div class=”item”><img src=”http://placehold.it/80×80&text=2″ /></div>
<div class=”item”><img src=”http://placehold.it/80×80&text=3″ /></div>
<div class=”item”><img src=”http://placehold.it/80×80&text=4″ /></div>
<div class=”item”><img src=”http://placehold.it/80×80&text=5″ /></div>
<div class=”item”><img src=”http://placehold.it/80×80&text=6″ /></div>
<div class=”item”><img src=”http://placehold.it/80×80&text=7″ /></div>
<div class=”item”><img src=”http://placehold.it/80×80&text=8″ /></div>
</div>

var sync1 = $("#slider");
var sync2 = $("#thumbnails");
var flag = false;
var slides = sync1.owlCarousel({
margin: 10,
items: 1,
nav:true,
navText:'',
dots:false
}).on('change.owl.carousel', function(e) {
if (e.namespace &amp;&amp; e.property.name === 'position' &amp;&amp; !flag) {
flag = true;
//thumbs.to(e.relatedTarget.relative(e.property.value), 300, true);
flag = false;
}
}).on('changed.owl.carousel', function(event) {
//sync2.trigger('next.owl.carousel');
sync2.trigger('to.owl.carousel', [event.item.index,100,true]);
}).data('owl.carousel');
var thumbs = sync2.owlCarousel({
items:4,
nav:false,
dots:false,
responsive:{
0 : {
items:1
},
320 : {
items:2
},
480 : {
items:3
},
600 : {
items:4
},
767 : {
items:2
},
991 : {
items:4
}

}
}).on('click', '.item', function(e) {
e.preventDefault(); sync1.trigger('to.owl.carousel', [$(e.target).parents('.owl-item').index(), 300, true]);
}).on('change.owl.carousel', function(e) {
if (e.namespace &amp;&amp; e.property.name === 'position' &amp;&amp; !flag) {
//nsole.log('…');
}
}).data('owl.carousel');