phucbm / flickity-responsive

💻📱Responsive option for Flickity.
https://flickity.netlify.app
MIT License
9 stars 1 forks source link

select() not working after resize #26

Open blursolo opened 1 year ago

blursolo commented 1 year ago

I am using v.2.0.6 in Vue and have a initialized a slideshow like this:

this.flkty = new FlickityResponsive( slideshow, {
    cellAlign: 'left',
    prevNextButtons: false,
    pageDots: true,
    wrapAround: true,   
    autoPlay: false,
    pauseAutoPlayOnHover: false,
    draggable: false,
    selectedAttraction: 0.013,
    friction: 0.26,
    dragThreshold: 1,
    adaptiveHeight: true,
    imagesLoaded:true,
    responsive: [{
        breakpoint: 768,
        settings: {
            draggable: true,
            selectedAttraction: 0.2,
                    friction: 0.8   
        }
    }]      
});

I have a button which, on click, executes the following code:

this.flkty?.select( index, false, false );

It works, but as soon as I downsize the window to match the breakpoint, the code isn't working anymore. There is no error message, it just doesn't do anything. It also doesn't work when I resize the window back to its default desktop size.

Any idea how to fix this?

--- EDIT

Other commands like .next() or .previous() aren't working either..

phucbm commented 1 year ago

It probably loses the instance while switching between breakpoints. Could you get the instance before executing the methods instead? As stated in https://github.com/phucbm/flickity-responsive/issues/21#issuecomment-1478892118