Draggable after resize

[wayheming]

Hi, @desandro thanks a lot for a great plugin. I have a problem. I hope you will help me or send to issue where there was already such a question. If I initially have 3 items in the carousel and they are 33% wide, which means 3 columns, then the carousel is not possible dragging but after resizing I want the columns to become 2 and the carousel starts to work but dragging does not start working.

https://gyazo.com/373773039da57d04ea5229e315ecc4cc

Test case: https://jsfiddle.net/wayheming/3L72nqzr/6/

[desandro]

Thanks for reporting this issue. Looks like you have both contain and groupCells enabled. With only 3 cells and 33% wide, then they all fit in the carousel and act as a single grouped slide, so there is nothing to slide to.

When there is 50% width, there is a weird calculation issue with contain, in that there's a little extra room to show the 3rd cell flush on the right side.

My recommendation is to disable contain or groupCells or both.

[wayheming]

Hi, @desandro thanks a lot for the quick reply. Is there a way to leave the options enabled and fix the problem with a code or other fix?

[desandro]

Sorry, that's the best solution I have.

[wayheming]

@desandro Ok, thank you)

[rubenbristian]

I was just about to open a new ticket with the same bug. Draggable should listen to the resize event and reconfigure itself if the visible cells number is changed, and it is not needed anymore. Or vice-versa, if there is only one slide at the beginning, but after resize there are more, draggable should work. But instead, it keeps itself with the original cells number.

The only solution i came up with was to destroy the slider and reinit it inside a debounced resized event, if i would find that the total cells width is larger than the viewport's width. It's not elegant, but this case should only happen for a really small number of users.

$(window).on('resize.blog-slider', window.debounce(function(){
    var cellsWidth = 0;
    $slider.find('.blog-item').each(function(){
        cellsWidth += $(this).outerWidth(true);
    })

    if ( cellsWidth > $slider.width() && ! $slider.hasClass('is-draggable') ) {
        initSlider($slider)
    } else if ( cellsWidth <= $slider.width() && $slider.hasClass('is-draggable') ) {
        initSlider($slider);
    }

}, 300));

function initSlider($slider) {
    $slider.flickity('destroy');
         setTimeout(function(){
        $slider.flickity({
             cellSelector: '.blog-item',
             cellAlign: 'left',
             groupCells: true,
             prevNextButtons: false,
             pageDots: true
         });
    }, 1);
}

[xxvii]

@desandro same problem here. When all the cell are contained in a group and then you resize the window until the cells are split in more than one group, dragging is not possible. Even calling resize, reposition or reloadCells AFTER window resize doesn't work. You must destroy and reinitialize flickity to make dragging working again,

The bug is not closed and is evident, because flickity calculates correctly the number of cells per group after resize, but dragging is not enabled.

see https://codepen.io/Stanza27/pen/oNjOzOJ