CODEWITHSUNDEEP
javascriptcarouselowl-carousel
Reza
Reza

Reputation: 19843

Next and Prev button will slides 2 items on OWL Carousel

I am using OWL Carousel (1.3.3) as bellow

$(".CardSlider").owlCarousel({
  navigation: true,
  navigationText: ["ﺑﻌﺪﻯ", "ﻗﺒﻠﻰ "],
  pagination: false,
  slideSpeed: 300,
  paginationSpeed: 400,
  singleItem: true,
});

Everything is fine on Desktop browser, but on Mobile device when I touch Next or Prev button it slides 2 items,

First I was suspicious about the resubscription of event handlers so I added this option mouseDrag : false but nothing is changed.

Then I opened the owl script file and set some alerts in next method. when alerts are shown the functionality is OK I mean it slides 1 item. also I check this variables in that 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

Upvotes: 4

Views: 1887

Answers (1)

Reza
Reza

Reputation: 19843

After not getting help from anyone even the official email address from their site I resolved my problem, On mobile device the event handler for next and prev button was assigned twice one for click and one for touch. So I have resolved the issue as this: In owl.carousel.js Line 424 I have 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 have added this function at the end of js file

function isMobile() {
    return navigator.userAgent.match(/Android|webOS|iPhone|iPod|iPad|BlackBerry/i) !== null;
}

Upvotes: 3

Related Questions