CODEWITHSUNDEEP
jquerycssowl-carousel
Kadmos B
Kadmos B

Reputation: 251

How to slide 2 Owl carousels with one navigation

I'm using Owl-Carousel 2.3.4 version, and I need to have the contents of 2 carousels sliding at same time using the navigation on one slider, I need all types (prev/next buttons, dots, touch sliding).

For Owl-carousel v1.3.3 I've found a working solution here:
http://jsfiddle.net/m3n2q60d/40/ 

$(document).ready(function(){
    var o2 = $('#c1')
    o2.owlCarousel({
        items:1,
        singleItem:true,
        loop:true,
        margin:10,    
        navigation :true,
        touchDrag: true,
        mouseDrag: true,
        afterMove: function (elem) {
           var current = this.currentItem;
           o1.trigger('owl.goTo',current);
        }
    });

    var o1 = $('#c2');
    o1.owlCarousel({
        items:1,
        singleItem:true,
        loop:true,
        margin:10,   
        pagination:false,
        navigation :false,
        touchDrag: true,
        mouseDrag: false,
        afterMove: function (elem) {
           var current = this.currentItem;
           o2.trigger('owl.goTo',current);
        }
    });
});

But it's not working for v2.3.4 because "afterMove" Option is not available in the new version.
http://jsfiddle.net/m3n2q60d/18/

Could anyone suggest a solution for Owl-carousel 2?

Upvotes: 2

Views: 3051

Answers (1)

Problem Child
Problem Child

Reputation: 585

I think you'll need to write separate onclick functions as below.

 $(document).ready(function() {
     var o1 = $('#c1'), o2 = $('#c2');

     //Sync o2 by o1
     o1.on('click', '.owl-next', function () {
         o2.trigger('next.owl.carousel')
     });
     o1.on('click', '.owl-prev', function () {
         o2.trigger('prev.owl.carousel')
     });
     //Sync o1 by o2
     o2.on('click', '.owl-next', function () {
         o1.trigger('next.owl.carousel')
     });
     o2.on('click', '.owl-prev', function () {
         o1.trigger('prev.owl.carousel')
     });

     //Carousel settings
     o1.owlCarousel({
         center : true,
         loop : true,
         items : 1,
         margin:0,
         nav : true
     });
    o2.owlCarousel({
         center : true,
         loop : true,
         items : 1,
         margin:0,
         nav : true
     });
 });

Please check the fiddle I created.

JS Fiddle

Upvotes: 2

Related Questions