-
-
Notifications
You must be signed in to change notification settings - Fork 9.7k
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
Clicks inside Swiper not working #1152
Comments
I've found the issue... This two options: However, I believe these options functionality is not the one intended (meaning that you don't want to solve unwanted clicks when dragging by disallowing any click on the slider). I leave the issue open in case someone wants to check this out. CC @nolimits4web |
I'm experiencing this issue on Android 4.1.2, even with that properties enabled to false I'm not able to do clicks inside my slides, any idea? thanks. |
Will check it again, thanks |
Need live examples or at least Fiddles, because i can't see such issues in Chrome and in Android 4.1.2 |
Checked again, not happening. It appears to be solved. If you think it's done feel free to close the issue. |
Ok, i think we can solve it, until we have a real evidences :) |
nope , it's not fixed. available under android 4.4 , using zepto and swiper.jequery.js |
This is fixed for Android in dev version |
Android 4.x (not 4.4), Which dev version? The 'onClick' triggered But the clicking of element not triggering. (Element in first slides works, But not working on element in second slides .) |
You need to build it https://github.com/nolimits4web/Swiper#build |
Ok, I will try tommorrow and reply you with result~ |
I've been having the same issue @Rykka is having. I built the development version to solve the issue with IE11 and the fade effect, but the arrows stopped working. Pagination works, links inside the |
Nope, still not working. using dev version with android 4.3 |
The fix is actually in CSS file, so you need also dev css file |
oops 👍 |
The issue's still not resolved :( |
@SantzDesign You are right |
@buyukmavi it's not solving the issue actually, these settings are both very useful, they prevent accidental clicks when swiping for example. Hopefully the issue will be solved by the developer. It's the worst thing that may happen in terms of user experience - when clicking a link does nothing. |
@SantzDesign how to turn off them without changing the source code of swiper.js? |
@skylee91 - Hey man, to do that, you need to set both to false when initializing Swiper.js, here's an example: var mySwiper = new Swiper('.swiper-container', { And that's it! Hope it helps, bye! |
@SantzDesign Hi thanks, but for my case, preventClicks: false able to solve the problem.
Thanks ^^ |
I have a similar issue. I have preventclicks:false and I am able to click the link. however, If I click the next/prev buttons, the link no longer works as i'm clicking the swiper-container element instead of the actual link. (even $('element a').click doesn't trigger). Further, If I click and drag the slider, the link will work again... any ideas? |
**@paOol i agree with you, i have the same problem and still trying to find a solution,
I have preventclicks:false and I am able to click the link. however, If I click the next/prev buttons, the link no longer works as i'm clicking the swiper-container element instead of the actual link. (even $('element a').click doesn't trigger). Further, If I click and drag the slider, the link will work again... any ideas? |
Same issue here, I cannot click links which are in the main Swiper container. It doesn't work on the home page http://idangero.us/swiper/ - so when I click any of the links (by iDangero.us, Download, Get Started, API...) nothing happens in Chrome Version 52.0.2743.116 m, also doesn't work in Chrome Canary Version 54.0.2836.0 canary (64-bit) . I'm using Windows 8.1. The preventclicks:false doesn't help. Update: |
I've fudged it on a few of my projects by adding the following It's dirty, but it get's the job done until there is an official fix. |
So, from what I understand the issue exists only Chrome due to a problem in that browser for quite some time now. Does someone know what exactly within Chrome is causing the issue? Maybe we can open an issue on Chromium repo page or at least search if there is already a ticket. |
Just tested as well... click event on swiper is very inconsistent within chrome. |
It looks to me like this has something to do with the alt-text pop up? While the alt-text popup is shown, clicking the link does nothing. If the alt-text is not there, it works as expected. Can someone confirm this? Tested on Windows 10, Chrome 54.0.2840.99. |
I can't. My links have no alt and they also don't work from time to time. |
The intermittent failure to detect clicks in Chrome might have something to do with the "loop" option. When it's on, I can reproduce this, usually with the first item after after it wraps around. When "loop" is false, I cannot reproduce it at all. Any chance we can re-open this and get it looked at? |
Not always happens, and it occurs also without loop option. kaifire7's workaround works well! |
After months of struggling, I think I finally found the cause and the remedy for this. @marconett was right, it is related to alt-text (the native tool-tip that appears when you hover on controls) Just remove the 'title' attributes from your markup so that no text appears when you hover on a slide. It fixed my case, hope it is the root cause. |
Same problem, but I simply tried reordering the z-indices on some of the swiper elements and it worked.
|
Removing the title attribute, as suggested by @lifia, from the a tag inside swiper solved it for me. I experienced this issue in Chrome on Win10. |
@kaifire7 Insane. |
@lifia Thanks for this, working here too. For me only Chrome was affected aswell. |
My problem isn't that links aren't clickable, but the "active"/"pressed" effect of links doesn't apply... It's due to the mousedown event |
I can confirm removing the title attribute from the a tags in the slider solves the problem for me. I was only experiencing the issue in Chrome Windows 10. Anyone have a better solution than removing the title attribute? |
@Paul-Allen This is what I'm doing currently to avoid the problem: this.links.forEach(link => {
link.addEventListener('mousedown', e => {
e.stopPropagation();
});
}); Note that this means that you can't swipe on links anymore. |
There is still no official fix at the moment. For those who encounter similar problem but @kaifire7's approach does not work because no click event is detected at all on var swiperWrapper = document.querySelector('.swiper-wrapper');
swiperWrapper.addEventListener('click', function(event) {
if (event.target.tagName === 'A') {
// do something here
}
}); Basically, the idea is to listen to all click events on |
More information: if (this.swiper.activeIndex === 5) {
this.swiper.slideTo(1, false);
} else if (this.swiper.activeIndex === 0) {
this.swiper.slideTo(4, false);
} If you set the callback option in |
Any solution for this? |
@sijithc40 Please read through the comments: #1152 (comment) |
any solution working? |
@julmot I think add the class |
I've spent days implementing this swiper and the last slide requires an interactive iframe. I can't interact with the iframe... I need help with this! I've set preventClicks & preventClicksPropagation = false, no luck |
@timsmith339 Have you tried to add the |
Hi @Dotmagic thanks for the quick reply. I tried adding the 'swiper-no-swiping' class, I debugged swiper.js and see that it is recognizing the class and setting swiper.allowClick = true on clicks, but for some reason, the iframe is still unresponsive. I moved the iframe outside of swiper and it works perfectly. Let me know if you have any other ideas and thanks again! |
It's working now, I had the pagination styled up above the content and it was covering the swiper slide bodies, absorbing the clicks. |
This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs. |
Hi,
I'm experiencing non-functional links, pagination and next/prev arrow link with the 3.0.4 version.
I'm using Chrome 41.0.2272.76 m on Windows 8.1
I'm not only having the problem on an implementation I'm trying to build, but also on the plugins landing page: http://www.idangero.us/swiper/
If anyone know why this is happening, let me know.
Kind regards.
The text was updated successfully, but these errors were encountered: