0
140
ViewsHow can I solve "prevent touch scrolling" in SwiperJS library?
Gif to show the problem:
<Swiper
className="panel-swiper"
initialSlide={value}
onSwiper={setSwiper}
onSlideChange={handleSlideChanging}
simulateTouch={false}
>
<SwiperSlide>Panel 0</SwiperSlide>
<SwiperSlide>Panel 1</SwiperSlide>
<SwiperSlide>Panel 2</SwiperSlide>
<SwiperSlide>
<League />
<League />
<League />
</SwiperSlide>
<SwiperSlide>Panel 4</SwiperSlide>
<SwiperSlide>Panel 5</SwiperSlide>
<SwiperSlide>Panel 6</SwiperSlide>
<SwiperSlide>Panel 7</SwiperSlide>
<SwiperSlide>Panel 8</SwiperSlide>
<SwiperSlide>Panel 9</SwiperSlide>
</Swiper>
As you can see when I want to use touch to scroll page, it prevented. but using mouse wheel it's working properly correct.
I need to mention, I'm using SwiperJS.
·
Juan Pablo Isaza
1 answers
Answer question0
This is how I solved this problem, when I imported the extra modules (A11y, Navigation, Pagination), the problem went away.
import { Swiper, SwiperSlide } from 'swiper/react';
import { A11y, Navigation, Pagination } from 'swiper';
<Swiper
modules={[Navigation, Pagination, A11y]}
spaceBetween={50}
slidesPerView={1}
navigation
pagination={{ clickable: true }}
>
<SwiperSlide>
test
</SwiperSlide>
</Swiper>
·
Juan Pablo Isaza
Report
Answer question