javascriptswiper.js

How to prevent swiping on certain are of the slide using swiperjs

We are using swiperjs for slide. It is working great but we have input inside the slide and it is very hard to fill up the input if users can actually swipe on those. Im wondering if there is a way to prevent the slider sliding if user touchstart on an input.

This is how we init the slider:

new Swiper('.slider', {
  resistance: true,
  resistanceRatio: 25,
});

The HTML inside the slides includes

<input type="text">
<input type='range' min='0' max='11'>
Solution

  • I am answering this question in case somebody will have have the same issue in the future.

    Just add the swiper-no-swiping class on the elements that are not swipable or change the noSwipingClass parameter.