Search code examples
javascriptjqueryowl-carouselowl-carousel-2

Sync 2 owl carousels or add callbacks like "onchangeprev, onchangenext"

I'm trying to sync 2 owl carousels so that they change slides same time and same way. Carousels are looped. When I use this:

$("#slider").on('change.owl.carousel', function(event) {
    $("#text_slider").trigger('to.owl.carousel', [event.item.index,0,true]);
})

second carousel after reaching end of items doesn't move forvard as it should (it is looped) but moves backward to first item.

I also disabled dragging and tried this:

$('#slider .owl-prev').click(function() {
    $("#text_slider").trigger('prev.owl.carousel');
})
$('#slider .owl-next').click(function() {
    $("#text_slider").trigger('next.owl.carousel');
})

First time it seems ok... But autoplay is also enabled, and it's same on both carousels (autoplay:true, autoplayTimeout:4000, smartSpeed:400) and if watch carousels for a minute or two, i can notice that time interval occurs between changing slides, they starting to move asyncronously. The interval is not big, it's less than 1 second but it is really unwanted :(

It would be great if i could call trigger prev.owl.carousel on changing item to previous and next.owl.carousel when changing item to next, and disable autoplay in 2nd carousel but i didn't find the way to do it :(

Any suggestions about using another slider plugin that is responsive and can be looped and synced are welcomed

Solution

  • It seems that there is no workaround for owl carousel. I found that flexslider can be used for that, it has sync option and works fine.