Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

when I click on a button inside a slider, it brings that slider to the first position #5524

Closed
5 of 6 tasks
LukaLiuzzi opened this issue Mar 6, 2022 · 14 comments
Closed
5 of 6 tasks

Comments

@LukaLiuzzi
Copy link

LukaLiuzzi commented Mar 6, 2022

Check that this is really a bug

  • I confirm

Reproduction link

https://sendvid.com/2n22p5ns

Bug description

When I click on a button that I have inside my slider, instead of executing what the button should do, what it does is take that slider to position 1 of the carousel. what I want is that this does not happen since it does not allow the action of the button to be executed, which is to open an overlay. I leave a video so that it is better understood.

Expected Behavior

No response

Actual Behavior

No response

Swiper version

@8 cdn

Platform/Target and Browser Versions

Chrome

Validations

  • Follow our Code of Conduct
  • Read the docs.
  • Check that there isn't already an issue that request the same feature to avoid creating a duplicate.
  • Make sure this is a Swiper issue and not a framework-specific issue

Would you like to open a PR for this bug?

  • I'm willing to open a PR
@Voodoopupp
Copy link

Voodoopupp commented Mar 8, 2022

I can confirm this matter - but our slider only contains images with href-links.
Also here the link is not executed - instead of that the clicked item scrolls to first position

2022-03-08T13-13-57D0-19.mp4

Works as expected, when using Swiper 7.4.1, but all versions > 8.0.0 show the same problem...

@lspoor
Copy link

lspoor commented Mar 8, 2022

Also experiencing the same issues, same as @Voodoopupp, using anchor hrefs and getting the jump to position one. Reverted to 7.4.1 and all good. Noticed this issue on Android devices

@PGLeeJiajian
Copy link

It also happens on my application, but accidentally. I tried the site's demo, and same as my application‘s happening.

@sashabeep
Copy link

sashabeep commented Mar 31, 2022

SAME ON v 8.x. Tried everything from this list:

preventClicks: true,
preventClicksPropagation: true,
noSwiping: true,
noSwipingSelector: 'button',
slideToClickedSlide: false

with no luck

Marked price with red to better understanding

clicking.mp4

hey @nolimits4web can you please take a look?

7.4.1 does not reproduce this behaviour, clicking on the buttons does not make slide active

@SamTyurenkov
Copy link

Same here:

According to documentation slideToClickedSlide by default is set to false. However:

  1. on desktop chrome right-clicking on a visible, but not active slide which is a "" tag results into making it an active slide without even transitions (instantly). right-clicking on "
    doesn't behave like that.
  2. on mobile touching any visible makes it also active (I was using samsung internet browser, maybe also happens in other browsers)

Using it for a tag list of about 40 elements

new Swiper(".tag_menu .swiper", { createElements: true, effect: 'slide', slidesPerView: "auto", rewind: true, speed: 300, grabCursor: true, spaceBetween: 10, autoplay: { delay: 5000, pauseOnMouseEnter: true, disableOnInteraction: false }, });

Expected Behavior

  • desktop right click on properly opens a browser context menu
  • touching a without swiping doesnt make it active

Actual Behavior

  • desktop right click on a makes it active
  • touching a makes slide active, link is not followed

Swiper 8.0.7

@kimmo-dev
Copy link

I have the same problem.
https://codepen.io/Woohuu/pen/dydOVLJ

If I add focusableElements: 'input, select, option, textarea, video, label' in params (excluding 'button'), it works fine on desctop. But it still doesn't work on mobile.

Besides, I have the same problem with tag "a" in a mobile device (Android).
In 7.4.1 that works fine, but in 8 if slide is not active, clicked slide begins active, instead of starting an action, like running fancybox or opening a link.

In my example on codepen 1st link works, 2nd link works, but 3rd becomes active, instead of opening fancybox

video_2022-05-14_14-09-09.mp4

.

@ikphilip
Copy link

Same problems on 8.1.4 with a and label tags. Reverting to 7.4.1 fixed the issue.

@Szkatra
Copy link

Szkatra commented May 19, 2022

Same for me but only when slidesPerGroup is different from slidesPerView

In my case, I display 6boxes but want to iterate by 1...

@Szkatra
Copy link

Szkatra commented May 19, 2022

I just did a fast check of what might cause the error and found this commit:
1288271

It seems like the 'focus' is playing with us

Adding watchSlidesProgress: true, solves the issue due to the fact that observing if slides are visible which is used in the focus handler

@nastradalus
Copy link

The problem persists on version 8.3.2.
Szkatra's solution helped, but this swiper behavior looks like a bug.
Is there any progress on fixing this problem?

@dijkermans
Copy link

dijkermans commented Aug 10, 2022

I just did a fast check of what might cause the error and found this commit: 1288271

It seems like the 'focus' is playing with us

Adding watchSlidesProgress: true, solves the issue due to the fact that observing if slides are visible which is used in the focus handler

Yes but I noticed it's CPU intensive. My sliders become laggy so I hope there's a better solution.

related: #5625

@Superhands89
Copy link

This is still an issue on mobile/touch devices in version 8.4.2

@Blacklightdesign
Copy link
Contributor

I have a solution that mobile touch on ui elements like links or select fields no longer makes the slide jump to first place. Touch events also trigger a focus event. I added a condition to check that the focus event was not triggered by touch.
#6139

@carlos-gomez-espinosa
Copy link

adding "a11y: false" in my swiper options worked for me. For versions 9 and 10

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests