STYLE SWITCHER

Sync two owlCarousel using version 2

Owl-Carousel-2
<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');

Recent Article

Leave a Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

  1. Guest at 8:59 am

    Hi Anish. Thanks for the demo, can we have some way to apply active class for current item on thumbnails

  • Keep your skills sharp, get informed.

    Subscribe to our mailing list and get interesting stuff and updates to your email inbox