Codehints | Sync two owlCarousel using version 2

Sync two owlCarousel using version 2

Anish

Sep 25^th, 2014

Jquery

<div id="slider" class="owl-carousel">
<div class="item"><img src="http://placehold.it/350x150&text=1" /></div>
<div class="item"><img src="http://placehold.it/350x150&text=2" /></div>
<div class="item"><img src="http://placehold.it/350x150&text=3" /></div>
<div class="item"><img src="http://placehold.it/350x150&text=4" /></div>
<div class="item"><img src="http://placehold.it/350x150&text=5" /></div>
<div class="item"><img src="http://placehold.it/350x150&text=6" /></div>
<div class="item"><img src="http://placehold.it/350x150&text=7" /></div>
<div class="item"><img src="http://placehold.it/350x150&text=8" /></div>
</div>


<div id="thumbnails" class="owl-carousel">
<div class="item"><img src="http://placehold.it/80x80&text=1" /></div>
<div class="item"><img src="http://placehold.it/80x80&text=2" /></div>
<div class="item"><img src="http://placehold.it/80x80&text=3" /></div>
<div class="item"><img src="http://placehold.it/80x80&text=4" /></div>
<div class="item"><img src="http://placehold.it/80x80&text=5" /></div>
<div class="item"><img src="http://placehold.it/80x80&text=6" /></div>
<div class="item"><img src="http://placehold.it/80x80&text=7" /></div>
<div class="item"><img src="http://placehold.it/80x80&text=8" /></div>
</div>

var sync1 = $("#slider");
var sync2 = $("#thumbnails");
var flag = false;
var slides = sync1.owlCarousel({
margin: 10,
items: 1,
nav:true
}).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;
}
}).data('owl.carousel');
var thumbs = sync2.owlCarousel({
items:4,
nav:false
}).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');