CODEWITHSUNDEEP
reactjsswiper.js
Yaya
Yaya

Reputation: 4828

How to disable vertical mouse wheel swiper react

I'm using swiper

i created this with some customization

enter image description here

The problem is that even if i scroll vertically, slider changes the slides.
How can i disable vertical scrolling either with CSS or JS and the package itself?

here is my code

<MySwiper 
    slidesPerView={3}
    direction={"horizontal"}
    freeMode={true}
    
    style={{ overflow: "scroll", position: "relative" }}
    spaceBetween={100}
    mousewheel={true}
    className="mySwiper"
  >
    <SwiperSlide>
      <Slime></Slime>
    </SwiperSlide>
 </MySwiper>

Upvotes: 1

Views: 4809

Answers (1)

Yaya
Yaya

Reputation: 4828

Add forceToAxis:true to mousewheel like so

mousewheel={{  
 forceToAxis: true,
}}

this makes swiper to ignore vertical scrolling.

Upvotes: 4

Related Questions