swiper
swiper copied to clipboard
Mouse wheel control, hinders child mouse wheel events
Firstly, thanks for this amazing library. I think we have some issue with the mouse wheel control. I am using it for the virtual slider. When i have some scrollable text content inside a slide and i try to scroll using mouse wheel, slides are swiped instead of the the text content being scrolled.
Even if i have added noSwipingClass to the text content element, still it swipes.
Any help is appreciated.
I am using version "swiper": "^6.6.2"
My swiper configuration
let isDesktopDemo = true
<Swiper
onSlideChange={onIndexChanged}
direction={'vertical'}
pagination={false}
initialSlide={initialSlide}
preloadImages={true}
noSwiping={true}
noSwipingClass={'swiper-no-swiping'}
slidesPerView={1}
mousewheel={isDesktopDemo ? {
forceToAxis: true,
sensitivity: 0.5,
thresholdDelta: 14
} : false}
observer={true}
>
```
## Expected Behavior
Need to scroll the text content inside a slide, when we scroll over text content using mouse wheel scroll.
## Actual Behavior
When we scroll over text content, mouse wheel control swipes the slide instead of text content being scrolled.
@shivamragnar It looks like you are adding the scrollbehaviour to the carousel itself. Which makes the carousel listen to mousewheel events.
You should make the child listen to the event and prevent the slider from listening in this case, i think. @onair-lena I think this slider might fix our issues BTW
This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.
i am having the same issue
when using noSwipingClass it does prevents from changing slides using touch or drag but does not prevent changing slides using mousewheel
i want to change slides when scrollable DIV reaches its end
Same issue, any updates?
Issue is closed because of outdated/irrelevant/not actual/needed more information/inactivity.
If this issue is still actual and reproducible for latest version of Swiper, please create new issue and fill the issue template correctly:
- Clearly describe the issue including steps to reproduce when it is a bug.
- Make sure you fill in the earliest version that you know has the issue.
- Provide live link or JSFiddle/Codepen or website with issue