swiper: Links not working properly on slides

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.

About this issue

Original URL
State: closed
Created 8 years ago
Comments: 18 (7 by maintainers)

Commits related to this issue

Fix Win+Chrome clicks on "title" attibute links Fixes #2015 Fixes #1552 Fixes #1213 Fixes #1584 — committed to moyus/swiper-lite by nolimits4web 7 years ago

Most upvoted comments

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!

zhongdeliu on Mar 23, 2016

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

kireerik on Jun 9, 2016

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

muratgorken on Jun 8, 2016

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

Il martedì 8 marzo 2016, Erik Engi notifications@github.com 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 .

ebiasini on Mar 8, 2016

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.

kireerik on Mar 8, 2016