на странице заданы несколько owl каруселей, разделив их в скрипте с помощью id.
Вот структура html
<div id="corusel_kv">
<div class="next_button"><i class="fa fa-angle-right"></i></div>
<div class="prev_button"><i class="fa fa-angle-left"></i></div>
<ul id="owl-demo" class="owl-carousel">
li-шки
</ul>
</div>
<div id="corusel_ost">
<div class="next_button_zag"><i class="fa fa-angle-right"></i></div>
<div class="prev_button_zag"><i class="fa fa-angle-left"></i></div>
<ul id="owl-demo-1" >
li-шки
</ul>
</div>
а это уже javascript
var owl = $("#owl-demo");
owl.owlCarousel({
items : 3,
autoHeight : true,
autoPlay: 3000,
stopOnHover: true
});
var owl = $("#owl-demo-1");
owl.owlCarousel({
items : 3,
autoHeight : true,
autoPlay: 2000,
stopOnHover: true
});
на одной из площадок приводился пример "делегирования" своим элементам навигации для карусели
в итоге для дописал к скрипту первому
var owl = $("#owl-demo");
owl.owlCarousel({
items : 3,
autoHeight : true,
autoPlay: 3000,
stopOnHover: true
});
owl.on("mousewheel", ".owl-wrapper", function (e) {
if (e.deltaY > 0) {
owl.trigger("owl.prev");
} else {
owl.trigger("owl.next");
}
e.preventDefault();
});
$(".next_button").click(function() {
owl.trigger("owl.next");
});
$(".prev_button").click(function() {
owl.trigger("owl.prev");
});
var owl = $("#owl-demo-1");
owl.owlCarousel({
items : 3,
autoHeight : true,
autoPlay: 2000,
stopOnHover: true
});
При добавлении второй карусели кнопки вместо первой начинают работать для второй
в скриптах полный ноль, по примеру сделал одну, все работало, но как вторую добавил, но все...
помогите как скриптом разделить кнопки управления по своим группам