"Next" and "Prev" button Will show 2 positions on the OWL carousel
I am using OWL carousel (1.3.3) as below
$(".CardSlider").owlCarousel({
navigation: true,
navigationText: ["οΊο»οΊͺο»―", "ο»οΊο» ο»° "],
pagination: false,
slideSpeed: 300,
paginationSpeed: 400,
singleItem: true,
});
Everything is fine in the desktop browser, but on mobile, when I touch the Next
or button Prev
, it moves 2 items,
At first I was suspicious of re-subscribing event handlers, so I added this option mouseDrag : false
, but nothing changed.
Then I opened the owl script file and set some warnings in Next
. functionality is fine when warnings appear. I mean it shifts 1 element. also i check these variables in this method base.currentItem += base.options.scrollPerPage === true ? base.options.items : 1;
base.options.scrollPerPage
= false
base.options.items
= 1
(base.options.scrollPerPage === true ? base.options.items : 1)
= 1
source to share
After getting any help even from the official email address from my site, I haven't resolved the issue. On mobile, an event handler for the button next
and prev
was assigned twice for click
and one for touch
. So I solved the problem as follows: On owl.carousel.js
Line 424, I replaced this code
buttonsWrapper.on("touchstart.owlControls mousedown.owlControls", "div[class^=\"owl\"]", function (event) {
event.preventDefault();
});
buttonsWrapper.on("touchend.owlControls mouseup.owlControls", "div[class^=\"owl\"]", function (event) {
event.preventDefault();
if ($(this).hasClass("owl-next")) {
base.next();
} else {
base.prev();
}
});
with this
if (isMobile()) {
buttonsWrapper.on("touchstart.owlControls", "div[class^=\"owl\"]", function (event) {
event.preventDefault();
});
buttonsWrapper.on("touchend.owlControls ", "div[class^=\"owl\"]", function (event) {
event.preventDefault();
if ($(this).hasClass("owl-next")) {
base.next();
} else {
base.prev();
}
});
}
else {
buttonsWrapper.on("touchstart.owlControls mousedown.owlControls", "div[class^=\"owl\"]", function (event) {
event.preventDefault();
});
buttonsWrapper.on("touchend.owlControls mouseup.owlControls", "div[class^=\"owl\"]", function (event) {
event.preventDefault();
if ($(this).hasClass("owl-next")) {
base.next();
} else {
base.prev();
}
});
}
Also I added this function to the end of the js file
function isMobile() {
return navigator.userAgent.match(/Android|webOS|iPhone|iPod|iPad|BlackBerry/i) !== null;
}
source to share