title: Active class not being applied when using 2 x 2 synced Owl Carousels
body: <p>I have 2 x 2 synced owl carousels on the same page demo of 1 x 2 synced can be seen here: <a href="http://www.owlgraphic.com/owlcarousel/demos/sync.html" rel="nofollow">http://www.owlgraphic.com/owlcarousel/demos/sync.html</a></p>
  
  <p>Now that I have 2 x 2 synced carousels, I modified the code a little to accomendate 2 sets of them.</p>
  
  <p>However! the "nav__item--active" class is ONLY being applied to the last carousel even if I click in the first carousel aswell.</p>
  
  <p>You can see the entire modified code of the link i supplied above right here:</p>
  
  <p>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.</p>
  
  <pre><code>        // 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&gt;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&gt;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)
          }
      }
  </code></pre>
  
  <p>Thank you so much! :D</p>