phucbm / flickity-responsive Goto Github PK

How can I properly destroy an instance of FlickityResponsive?

entity.flickity('destroy'); doesn't work.

It's a great library, thank you!

For some reason, when the carousel is not enabled, custom arrows still exist, while we don't need it?

I have a button on my website which trigger the height of the carrousel, and for it to work properly, it refresh the carrousel through "resize"
but sadly, when it force refresh, the default Flickity option are back (arrow, pagedot, draggable).

var $carousel = $('.carousel').flickity();

$('.button').on('click', function () {
    $carousel.toggleClass('is-expanded')
    setTimeout(function () {
        $carousel.flickityResponsive('resize');
    }, 600);
    $('.caption').toggleClass('hidden');
});

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..