CODEWITHSUNDEEP
javascriptreactjsswiper.js
Mirror
Mirror

Reputation: 43

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: 4

Views: 563

Answers (2)

Amine Kaddar
Amine Kaddar

Reputation: 21

Just found the solution; in your case; put a div at the end of the content of each slide and set it to fixed with >= z-index

<SwiperSlide>Panel 7<div id="touch-layer"></div></SwiperSlide>

<style>
#touch-layer{
   height: 100%;
   width: 100%;
   position: fixed;
   z-index: 1;}
</style>

Upvotes: 0

Naren Murali
Naren Murali

Reputation: 58334

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