How can I solve "prevent touch scrolling" in SwiperJS library?

user_15704120 0
Viewed 30

Gif to show the problem: enter image description here

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

swiper.js reactjs javascript
1 Answers

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>
user_59245620
Related