Swiper: Clicks inside Swiper not working

[SantzDesign]

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.

[SantzDesign]

I've found the issue... This two options: preventClicks and preventClicksPropagation, are by default set to true. Setting them to false will solve the issue.

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

[linoleum89]

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.

[nolimits4web]

Will check it again, thanks

[nolimits4web]

Need live examples or at least Fiddles, because i can't see such issues in Chrome and in Android 4.1.2

[SantzDesign]

Checked again, not happening. It appears to be solved. If you think it's done feel free to close the issue.

[nolimits4web]

Ok, i think we can solve it, until we have a real evidences :)

[gu-fan]

nope , it's not fixed.

available under android 4.4 , using zepto and swiper.jequery.js

[nolimits4web]

This is fixed for Android in dev version

[gu-fan]

Android 4.x (not 4.4), Which dev version?
I'm using the one on github but still not working.

The 'onClick' triggered But the clicking of element not triggering.

(Element in first slides works, But not working on element in second slides .)

[nolimits4web]

You need to build it https://github.com/nolimits4web/Swiper#build

[gu-fan]

Ok, I will try tommorrow and reply you with result~

[SantzDesign]

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 swiper-container work too, but the arrows don't. The right arrow randomly works the 1st time you click it.

[gu-fan]

Nope, still not working.

using dev version with android 4.3

http://jsbin.com/yulobupino/1/

[nolimits4web]

The fix is actually in CSS file, so you need also dev css file

[gu-fan]

oops :+1:

[hellor0bot]

The issue's still not resolved :(

[dedo-developer]

@SantzDesign
This two options: preventClicks and preventClicksPropagation, are by default set to true. Setting them to false will solve the issue.

You are right

[hellor0bot]

@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.

[skylee91]

This two options: preventClicks and preventClicksPropagation, are by default set to true. Setting them to false will solve the issue.

@SantzDesign how to turn off them without changing the source code of swiper.js?

[SantzDesign]

@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', {
speed: 400,
preventClicks: false,
preventClicksPropagation: false
});

And that's it! Hope it helps, bye!

[skylee91]

@SantzDesign Hi thanks, but for my case, preventClicks: false able to solve the problem.

var swiper = new Swiper('.swiper-container', {
        nextButton: '.swiper-button-next',
        prevButton: '.swiper-button-prev',
        slidesPerView: 3,
        spaceBetween: 10,
        preventClicks: false, //default is true to prevent accident click when swipe. But it caused the link is not clickable sometimes.
        breakpoints: {
            1440:{
                slidesPerView: 3,
                spaceBetween: 20
            },
            1024: {
                slidesPerView: 3,
                spaceBetween: 10
            },
            768: {
                slidesPerView: 2,
                spaceBetween: 10
            },
            640: {
                slidesPerView: 1,
                spaceBetween: 10
            },
            320: {
                slidesPerView: 1,
                spaceBetween: 10
            }
        }
    });

Thanks ^^

[paOol]

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?

[dedo-developer]

**@paOol i agree with you, i have the same problem

and still trying to find a solution,
does anyone have solution ?**

paOol commented 3 days ago
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?

[imiMike]

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:
Setting both preventClicks and preventClicksPropagation to false fixes the issue.

[kaifire7]

I've fudged it on a few of my projects by adding the following
$('.swiper-slide a').click(function() { window.location.href = $(this).attr("href"); });

It's dirty, but it get's the job done until there is an official fix.

[valnub]

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.

[ly2xing]

Just tested as well... click event on swiper is very inconsistent within chrome.
also tested on Edge and click detection on swiper in Edge actually works much better (even though if you move the mouse a little bit it won't fire the click event).

[marconett]

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.

[klaussilveira]

I can't. My links have no alt and they also don't work from time to time.

[arsindelve]

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?

[ghost]

Not always happens, and it occurs also without loop option.
You have to stress Chrome, maybe with multiple tab and continuing to drag. When it occurs, the bug affects all the windows.

kaifire7's workaround works well!

[lifia]

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.

[psiclonehi]

Same problem, but I simply tried reordering the z-indices on some of the swiper elements and it worked.

    .swiper-wrapper {
        z-index:3;
    }
    .swiper-pagination {
        z-index:2;
    }
    .swiper-button-next, .swiper-button-prev {
        z-index:4;
    }

[phaphan]

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.

[wonsuc]

@kaifire7 Insane.

[sasoriza]

@lifia Thanks for this, working here too. For me only Chrome was affected aswell.

[julmot]

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

[Paul-Allen]

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?

[julmot]

@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.

[ethanttbui]

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 a tags, you may want to try this:

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 swiper-wrapper but only handle those clicks on a tags. Again, this is dirty, but it works for me.

[ethanttbui]

More information:
If you are using simple transition effects like fade or slide (I'm not sure about other effects), there is a more elegant solution to this.
Because the duplicated slides are the root of all problems, simply avoid them by going to the corresponding non-duplicated slide whenever a duplicated slide is encountered. Suppose you have 4 slides, the real ones will be indexed from 1 to 4 and the 2 duplicated ones will be at 0 and 5. You can just listen to slide change event (using Swiper API) and do this in the handler:

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 slideTo() function to false, no transition effect will be shown and everything will look perfectly natural.
To be honest, I don't really get why we need to have duplicated slides.

[sijithc40]

Any solution for this?

[julmot]

@sijithc40 Please read through the comments: https://github.com/nolimits4web/Swiper/issues/1152#issuecomment-320497214

[heliomsolivas]

any solution working?

[ghost]

@julmot I think add the class swiper-no-swiping may have a similar impact? However, it didn't solve my issues when I'm using fade effect. With default swipe effect everything works well now.

[timsmith339]

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

[ghost]

@timsmith339 Have you tried to add the swiper-no-swiping CSS class to your iframe?

[timsmith339]

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!

[timsmith339]

It's working now, I had the pagination styled up above the content and it was covering the swiper slide bodies, absorbing the clicks.

[lock[bot]]

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.