Use different cells on different screen sizes

[richgcook]

Are we able to use different cells on different screen sizes on resize? I realise 'resize' isn't ideal but using the method flkty.resize(), which has a certain level of debounce, it's not that heavy on resources.

flkty.on('resize', function() {
    if ($(window).width() < 768) {
        flkty.options.cellSelector = '.slide:not(.hidden-xs)';
    } else {
        flkty.options.cellSelector = '.slide:not(.visible-xs)';
    }
    flkty.reloadCells();
});

The above should work in theory but the only issue is obviously once you update the cellSelector option it removes it outside the .flickity-viewport in the DOM so when it reloads the cells it can no longer find them.

Thoughts?

[desandro]

You could try replacing flkty.reloadCells() with

flkty.deactivate();
flkty.activate():

There's also an issue of your selectors, which may work with jQuery but not with vanilla JS.

I feel like there's a more straightforward solution to this problem. Perhaps setting up two separate carousels that are visible or not visible, rather than trying to manage it all in the same carousel.

[richgcook]

You could try replacing flkty.reloadCells() with flkty.deactivate(); flkty.activate():

This worked a treat! And I know what you mean re two separate carousels... just felt like a lot of extra overhead?

[richgcook]

Just a quick update. Unfortunately this means the order of the DOM elements is now wrong. I'm working out whether after the flkty.deactivate(); and before the flkty. activate(); I could run a sort by their index (which I already have added as a 'data-index' per slide.

[richgcook]

flkty.deactivate();

$slide.sort(function(a, b) {
    return +$(a).attr('data-index') - +$(b).attr('data-index');
}).appendTo($slider);

flkty.activate();

This seems to work...

[desandro]

Hmm, yeah. Flickity is not set up for this kind of behavior. I think you're better served trying to change content within the same cell elements.