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

Question

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

Astrogate

Answer 1

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.

Astrogate

this solution works, but not disable the mouse wheel swipe... – Murrhine

Answer 2

In ReactJS: Here you you can include the 'swiper-no-swiping' class to as explained by the first answer:

/*In ReactJS - this is how you would do it.*/
    <Swiper className='theSwiper' 
            slidesPerView={1.1}
            modules={[Autoplay, Pagination]}
            pagination={{ clickable: true }}
            watchSlidesProgress
            // onSlideChange={(e) => console.log(e)}
            // onReachEnd={() => { console.log("end game")}}
            >
        <SwiperSlide className='eachSlide swiper-no-swiping' >
            /*Place your slides contents*/
        </SwiperSlide>
    </Swiper>

Revolutionize

Answer 3

I resolved the issue by adding the class name set in the noSwipingClass parameter (default is 'swiper-no-swiping') to the areas where I wanted to prevent swiping.

https://swiperjs.com/swiper-api#param-noSwipingClass

Rodrigo