staticClick event doesn't trigger if draggable: false

[flogehring]

Not sure if this is supposed to be this way. I wanted to disable dragging because it can be annoying when scrolling on mobile devices. Turns out™ it disables the static click too 😁

[desandro]

See my comment below for possible solution

This behavior is intended. If draggable is disabled then you don't need staticClick. But I recognize there's your edge, when you have draggable disabled, sometimes, and you always use staticClick.

If others would like staticClick to fire with draggable: false, Add a 👍 reaction to this issue. Do not add +1 comments — they will be deleted.

[flogehring]

My case:

• I have added a lightbox (with higher quality images) for the staticClick event.
• I want the lightbox to be fired on all sizes
• I always want the slider to AutoPlay
• I want draggable disabled on small handsets, because it's annoying when scrolling vertically
• I want to show the arrows only on small handsets where draggable is false

I've separated the draggable vs. arrows situation using a Modernizr media query before the init. However, I have to do it (the separation) again when attaching the click event for the lightbox.

• Using a regular click handler with draggable enabled fires after dragging (which is probably why you implemented staticClick.
• staticClickdoesn't work when draggable is disabled

I know it's a bit complicated but I hope you get what I'm trying to explain 😉

[since1976]

Another example is when you use asForNav. If you set your b gallery (menu for a gallery) to draggable: false it will prevent you from being able to click on a b gallery item to control your a gallery.

[desandro]

It won't prevent you, you can use normal click event instead.

[jj2020driver]

I agree with @since1976 . It prevents click...

[passiomatic]

Yes, this hit me today as well.

I'm implementing a carousel which advances when user interacts with single cells, without using left/right arrows nor page dots. I'm using staticClick to figure out which cell has been clicked and its index.

However, sometimes it would be desirable not to be able to flick back, so I've specified draggable: false as option and noticed that staticClick is not fired.

Update: Also I thought to trap cellSelect instead, which is actually the only thing I really need but AKAIK it doesn't get called too, perhaps because staticClick it's not fired in the first place.

[flowgrow]

+1

[passiomatic]

+1

[sjelfull]

+1

[justrhysism]

+1

You can't use asForNav without draggable: true - I can't see why this is limited this way. I should be able to use asForNav regardless of the draggable setting.

For my current project, it has rendered asForNav completely useless.

[markseuffert]

I am also running into this problem. I implemented an option that goes to the next cell when the Flickity div is clicked, but there is no staticClick event if draggable is set to false. Would be nice to configure this independently.

[jinmichaelr]

+1

[beefchimi]

+1

[Dylan-Chapman]

+1

[sgtpenguin]

+1

Although I was able to get my intended usage working. Using asNavFor + draggable: false and just bound a click event to each of the nav items as outlined in the docs

http://flickity.metafizzy.co/api.html#select

[DustinStupp]

Is this still being considered? +1

[desandro]

If your Flickity carousel has draggable: false and you still want to use staticClick events for convienent cellElem and cellIndex arguments, you can add this code to always trigger staticClick on click:

// jQuery
var $carousel = $('.carousel').flickity({
  draggable: false,
});

// hack staticClick
var flkty = $carousel.data('flickity');
flkty.element.addEventListener( 'click', function( event ) {
  flkty.staticClick( event, event );
});

// vanilla JS
var flkty = new Flickity( '.carousel',{
  draggable: false,
});

// hack staticClick
flkty.element.addEventListener( 'click', function( event ) {
  flkty.staticClick( event, event );
});

See demos: jQuery & vanilla JS

[desandro]

🎉 **Flickity v2.1.0 has been released with support for all new staticClick enabled with draggable: false 🎉

I'm now closing this issue. Please open a new issue if you into trouble with using staticClick. Thanks for all the +1's and 👍 over the years. 🌈🐻

[chpio]

I have a somewhat related issue:

let nav = document.querySelector('.nav');
let content = document.querySelector('.content');

    new Flickity(nav, {
        draggable: true,
        setGallerySize: false,
        asNavFor: content,
    });

    new Flickity(content, {
        draggable: false,
        pageDots: false,
        prevNextButtons: false,
        setGallerySize: true,
    });

clicks on the cells work as expected (change the selected cell in the content flickity) but if i press the arrows or drag to an other cell in the nav the content flickity isn't affected. I also tried swapping the asNavFor option to the content:

    new Flickity(nav, {
        draggable: true,
        setGallerySize: false,
    });

    new Flickity(content, {
        draggable: false,
        pageDots: false,
        prevNextButtons: false,
        setGallerySize: true,
        asNavFor: nav,
    });

that fixes the drag-and-arrow-click issue but now it's completely ignoring direct clicks on nav cells and dots (on the nav flickity obviously).

[desandro]

@chpio Could you please open a new issue with a reduced test case. See Submitting Issues in the contributing guidelines.

I'm locking this thread.