Link click issue with flickity JS plugin

Question

I want to know when the user starts the navigation to a new page by clicking in a link located inside my Flickity slider. I have attached the jQuery click event on the links, but when the user slides and click at the same time, the click event on the <a> is triggered but the navigation to the link adress does not occur.

Demo : http://codepen.io/anon/pen/GoapaY . To reproduce the issue : click down on the link, then slide, then release your click : the event is triggered but the navigation to example.com have not occured.

Which event/trick can I use to know when the user actually navigate to the link adress ?

bviale · Accepted Answer · 2016-09-02T08:46:21.980

3

Answer obtained with this issue opened on Flickity's GitHub :

This is the intended behavior. This allows users to slide the gallery using any element on the page, links, buttons, etc. It lets click events propagate. There's additional logic so that static clicks do trigger a click on the element, and allow links to go through if no sliding occurred. Flickity's staticClick event might be what you're looking for.

edited Sep 02 '16 at 08:46

answered Feb 19 '16 at 16:57

bviale

5,245
3
28
48

Newer link to event: http://flickity.metafizzy.co/events.html#staticclick – robsch Sep 02 '16 at 06:42

score 1 · Answer 2 · answered Oct 22 '18 at 17:39

This solves the issue for me:

$el.on('dragStart.flickity', () => $el.find('.slide').css('pointer-events', 'none'));
$el.on('dragEnd.flickity', () => $el.find('.slide').css('pointer-events', 'all'));

I just disable pointer events on dragStart and reinstate them on dragEnd.

score 1 · Answer 3 · answered May 21 '20 at 12:42

1

Ali Klein's solution worked for me.

I'm not using jQuery so here is the code I'm using

 const carousel = document.querySelector('.carousel')
 const flkty = new Flickity(carousel, {
      // ...options
      on: {
        'dragStart': () => {
          carousel.style.pointerEvents = 'none'
        },
        'dragEnd': () => {
          carousel.style.pointerEvents = 'all'
        }
      }
    })

answered May 21 '20 at 12:42

Leo Seyers

197
2
7

This worked really well for me. – Alexander Horner Mar 14 '22 at 09:11

Link click issue with flickity JS plugin

3 Answers3