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 :)
Вопрос
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
Решение
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 :)