CODEWITHSUNDEEP
javascriptreactjsswiper.js
Mirror
Mirror

Reputation: 33

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

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.

Upvotes: 3

Views: 553

Answers (1)

Naren Murali
Naren Murali

Reputation: 56099

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>

Upvotes: 1

Related Questions