Подключил две owl карусели и выглядит это так:
$(document).ready(function() {
$('.carousel').each(function(){
var carousel = $(this);
carousel.owlCarousel({
loop:true,
margin:10,
nav:false,
dots:false,
items: 1,
responsive:{
0:{
items:1
},
600:{
items:3
},
1000:{
items:5
}
}
});
carousel.next().find(".customNextBtn").on('click', function(){
carousel.trigger("next.owl.carousel");
});
carousel.next().find(".customPreviousBtn").on('click', function(){
carousel.trigger("prev.owl.carousel");
});
});
});
Проблема в том, что когда кнопки customPreviousBtn и customNextBtn расположены выше карусели, то они не работают, а когда они ниже - работают.
Если я правильно понял, где-то тут:
carousel.next().find(".customNextBtn").on('click', function(){
carousel.trigger("next.owl.carousel");
});
carousel.next().find(".customPreviousBtn").on('click', function(){
carousel.trigger("prev.owl.carousel");
});
нужно указать, чтобы скрипт искал эти кнопки в блоке с определенным id, к примеру "#films", и обернуть их в id=films
Только не знаю как это правильно сделать.
