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'>

2 thoughts on “How to prevent swiping on certain are of the slide using swiperjs”

  1. In answering this question encase somebody will have have same issue in the future.

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

    Reply
  2. Interact the swiper by dragging or swiping it pretty fast several times. After interacting the swiper will start auto play again with strange behaviours such as speed

    Reply

Leave a Comment