Swiper: Links not working properly on slides

[kireerik]

When a title attribute is provided on a link (<a title="title" href="url">), than the link does not works after the tooltip appears and you click the link. It works if you do not wait until the tooltip is displayed by the browser. It also works after you click it with displayed tooltip (and nothing happens, only the tooltip become hidden). I think links should work any way.

Links do work when you click them, hold down your left mouse button and than you move your cursor somewhere else upwards or downwards and than you move back on the link and finally you release your left mouse button. I think in this case they should not work or the default behavior should be used. So the link it self is grabbed and you can copy it by drag and drop or open it in a new tab for example.

[nolimits4web]

Browser, platform, versions? Would be also good to see live example or JSFiddle with the issue

[kireerik]

Google Chrome 48.0.2564.82 m (64-bit), Windows 10 Pro (64-bit), Swiper 3.3.0.

You can experience the secondly described issue right on Swiper's homepage. You can also experience the firstly described title issue after executing this simple code snippet on Swiper's homepage in the console: $('a').attr('title', 'title'). You can try with any links in the slider.

[nolimits4web]

This is a known issue of Chrome + Windows about issues clicks. As for the second thing, will check what can be done

[robbiecooray]

First time poster...

Can confirm issue on the Swiper's homepage (i.e. the links do not work on the first slide).

Browser:
Chrome 48.0.2564.109 (Official Build) m (32-bit)
Windows 8

Is this issue going to be fixed anytime soon? Thanks in advance.

[robbiecooray]

Perhaps any workaround until the issue is resolved? Love the product, but this is really a showstopper. :(

[ebiasini]

Please let me know. I have the same issue on Google Chrome 48.0.2564.82 m (64-bit), Windows 10 Pro (64-bit), Swiper 3.3.0.
I need a workaround until the Chrome issue is solved.

[kireerik]

You can use the following workaround for the tittle issue:

$('a').on('mouseenter', function() {
    $(this)
        .data('title', $(this).attr('title'))
        .removeAttr('title')
}).on('mouseleave', function() {
    $(this).attr('title', $(this).data('title'))
})

This is a jQuery implementation, but you can use Vanilla JS as well of course.

You can use the swiper-no-swiping class on link elements as a workaround for the secondly described issue and for the title issue as well.

[ebiasini]

Is this a joke? Swiper no swiping like Dora The Explorer? Wow

Il martedì 8 marzo 2016, Erik Engi [email protected] ha scritto:

You can use the following workaround for the tittle issue:
$('a').on('mouseenter', function() {
$(this)
.data('title', $(this).attr('title'))
.removeAttr('title')
}).on('mouseleave', function() {
$(this).attr('title', $(this).data('title'))
})
This is a jQuery implementation, but you can use Vanilla JS
http://vanilla-js.com/ as well of course.

You can use the swiper-no-swiping class on link elements as a workaround
for the secondly described issue and for the title issue as well.

—
Reply to this email directly or view it on GitHub
https://github.com/nolimits4web/Swiper/issues/1584#issuecomment-193955639
.

[kireerik]

No it is not, it is included in Swiper's official documentation API. :)

| Parameter | Type | Default | Description |
| --- | --- | --- | --- |
| noSwipingClass | string | 'swiper-no-swiping' | If true, then you can add noSwipingClass class to swiper's slide to prevent/disable swiping on this element |

[robbiecooray]

I think the issue is not just having a title.

On another note, the links on the home page started to work again! (http://idangero.us/swiper/#.Vt9Vf0J94-X) Same setup, but Chrome version changed. 49.0.2623.75 m.

So is this change due to the chrome upgrade, or a swiperjs upgrade? Can't really tell because the js used in the homepage does not provide a version number. :)

Can anyone else confirm?

[robbiecooray]

I can also confirm the issue has gone away in our app.

I configured the following as an interim measure until this gets fixed (for anyone still having the issue)
preventClicks: false,
preventClicksPropagation: false

Took these off, and it still works!

I guess the Chrome upgrade is the solution.

[kireerik]

I tested it out and the preventClicks: false setting it self works as a workaround for the title issue, but it won't prevent accidental unwanted clicks on links during swiping, because you turn this feature off.
The Chrome version does not matter.

[zhongdeliu]

I would support @kireerik statement that preventClicks: false is not a real solution as to are disabling the unwanted clicks handling.

So any real solution or at least workaround would be great!

[stentas]

I also experiencing this issue.
In Chrome v50.0.2661.102 clicking a link slide triggers something in Swiper and does not open the url. Clicking the link again will open the URL.

preventClicks: false is not a workaround as it makes it near impossible to use the slider without opening the url's.

Have you figured out a solution yet @nolimits4web ?

[muratgorken]

Until someone figure a solution, just like @kireerik said : "just add the link elements to 'swiper-no-swiping' class.

[stentas]

@muratgorken, using @kireerik solution is a terrible solution. You are disabling swiping on the elements, thus disabling the entire Swiper.

The _issue_ is that clicking a link <a class="swiper-slide"... does not open the link the first time, as Swiper intercepts the click action. If you click the link again, the URL is opened.

This bug only occurs in Chrome.

[kireerik]

@stentas, it is not a solution, it is only a workaround for this issue (#1584) .

The issue you describe is actually an other issue (#1552) already referenced to this issue.

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