swiper icon indicating copy to clipboard operation
swiper copied to clipboard

Mouse wheel control, hinders child mouse wheel events

Open shivamragnar opened this issue 4 years ago • 4 comments

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 avatar Jun 10 '21 23:06 shivamragnar

@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

sanderkooger avatar Aug 01 '21 16:08 sanderkooger

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.

stale[bot] avatar Apr 16 '22 05:04 stale[bot]

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

Kaizodo avatar May 18 '22 04:05 Kaizodo

Same issue, any updates?

frietkip avatar Jun 30 '22 09:06 frietkip

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

nolimits4web avatar Oct 24 '23 12:10 nolimits4web