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

[LukaLiuzzi]

Check that this is really a bug

• [X] 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

• [X] Follow our Code of Conduct
• [X] Read the docs.
• [X] Check that there isn't already an issue that request the same feature to avoid creating a duplicate.
• [X] 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]

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

https://user-images.githubusercontent.com/9829603/157245598-b59401c5-b4f7-400b-845d-de9bf97f29f1.mp4

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

[lspoor]

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]

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

[sashabeep]

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

https://user-images.githubusercontent.com/5689796/161028436-475c9d09-9186-4ddf-8dae-4aa4a6b9ce69.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

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]

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

https://user-images.githubusercontent.com/49077415/168423207-7319716c-7470-4d04-8584-98c7edf84490.mp4

.

[ikphilip]

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

[Szkatra]

Same for me but only when slidesPerGroup is different from slidesPerView

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

[Szkatra]

I just did a fast check of what might cause the error and found this commit: https://github.com/nolimits4web/Swiper/commit/128827156b0f125a5f6ecf1409add4146fa3c989

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]

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]

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: https://github.com/nolimits4web/swiper/issues/5625

[Superhands89]

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

[Blacklightdesign]

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]

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