Active class not being applied when using 2 x 2 synced Owl Carousels

Question

I have 2 x 2 synced owl carousels on the same page demo of 1 x 2 synced can be seen here: http://www.owlgraphic.com/owlcarousel/demos/sync.html

Now that I have 2 x 2 synced carousels, I modified the code a little to accomendate 2 sets of them.

However! the "nav__item--active" class is ONLY being applied to the last carousel even if I click in the first carousel aswell.

You can see the entire modified code of the link i supplied above right here:

REMEMBER! It's only the active class thats the problem! The 2 x 2 slideshows work perfectly other than the active class isn't being applied to the first slideshow.

        // FUNCTION THAT SYNCS TWO OWL CAROUSELS.
    var sync1 = $("#sync1");
    var sync2 = $("#sync2");

    sync1.owlCarousel({
        singleItem: true,
        slideSpeed: 1000,
        autoPlay: 4000,
        navigation: false,
        pagination: false,
        afterAction: syncPosition,
        responsiveRefreshRate: 200,
    });

    sync2.owlCarousel({
        itemsMobile: 4,
        items: 4,
        pagination: false,
        responsiveRefreshRate: 100,
        afterInit: function(el){
          el.find(".owl-item").eq(0).addClass("nav__item--active");
        }
    });

    function syncPosition(el){
        var current = this.currentItem;
        $("#sync2").find(".owl-item").removeClass("nav__item--active").eq(current).addClass("nav__item--active")
        if($("#sync2").data("owlCarousel") !== undefined){
          center(current)
        }
    }

    $("#sync2").on("click", ".owl-item", function(e){
        e.preventDefault();
        var number = $(this).data("owlItem");
        sync1.trigger("owl.goTo",number);
    });

    function center(number){
        var sync2visible = sync2.data("owlCarousel").owl.visibleItems;
        var num = number;
        var found = false;

        for(var i in sync2visible){
          if(num === sync2visible[i]){
            var found = true;
          }
        }

        if(found===false){
          if(num>sync2visible[sync2visible.length-1]){
            sync2.trigger("owl.goTo", num - sync2visible.length+2)
          }else{
            if(num - 1 === -1){
              num = 0;
            }
            sync2.trigger("owl.goTo", num);
          }
        } else if(num === sync2visible[sync2visible.length-1]){
          sync2.trigger("owl.goTo", sync2visible[1])
        } else if(num === sync2visible[0]){
          sync2.trigger("owl.goTo", num-1)
        }
    }

    var sync3 = $("#sync3");
    var sync4 = $("#sync4");

    sync3.owlCarousel({
        singleItem: true,
        slideSpeed: 1000,
        autoPlay: 4000,
        navigation: false,
        pagination: false,
        afterAction: syncPosition,
        responsiveRefreshRate: 200,
    });

    sync4.owlCarousel({
        itemsMobile: 6,
        items: 6,
        pagination: false,
        responsiveRefreshRate: 100,
        afterInit: function(el){
          el.find(".owl-item").eq(0).addClass("nav__item--active");
        }
    });

    function syncPosition(el){
        var current = this.currentItem;
        $("#sync4")
          .find(".owl-item")
          .removeClass("nav__item--active")
          .eq(current)
          .addClass("nav__item--active")
        if($("#sync4").data("owlCarousel") !== undefined){
          center(current)
        }
    }

    $("#sync4").on("click", ".owl-item", function(e){
        e.preventDefault();
        var number = $(this).data("owlItem");
        sync3.trigger("owl.goTo",number);
    });

    function center(number){
        var sync4visible = sync4.data("owlCarousel").owl.visibleItems;
        var num = number;
        var found = false;

        for(var i in sync4visible){
          if(num === sync4visible[i]){
            var found = true;
          }
        }

        if(found===false){
          if(num>sync4visible[sync4visible.length-1]){
            sync4.trigger("owl.goTo", num - sync4visible.length+2)
          }else{
            if(num - 1 === -1){
              num = 0;
            }
            sync4.trigger("owl.goTo", num);
          }
        } else if(num === sync4visible[sync4visible.length-1]){
          sync4.trigger("owl.goTo", sync4visible[1])
        } else if(num === sync4visible[0]){
          sync4.trigger("owl.goTo", num-1)
        }
    }

Thank you so much! :D

Answer 1

I found the answer myself :D

It's really a bad idea to have 2 x 2 almost identical javascript functions with the same name, so they overwrite each other :P Just call the 2 top ones syncPosition1 and center1 :)