Answer the question
In order to leave comments, you need to log in
Multiple owl carousel, how to separate control buttons?
multiple owl carousels are defined on the page, separating them in the script using id.
Here is the html structure
<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>
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
});
Answer the question
In order to leave comments, you need to log in
in the end, thanks to Maxim Zaitsev , he did it and it works)
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_1 = $("#owl-demo-1");
owl_1.owlCarousel({
items : 3,
autoHeight : true,
autoPlay: 2000,
stopOnHover: true
});
owl_1.on("mousewheel", ".owl-wrapper", function (e) {
if (e.deltaY > 0) {
owl_1.trigger("owl.prev");
} else {
owl_1.trigger("owl.next");
}
e.preventDefault();
});
$(".next_button_zag").click(function() {
owl_1.trigger("owl.next");
});
$(".prev_button_zag").click(function() {
owl_1.trigger("owl.prev");
});
Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question