metafizzy / flickity

:leaves: Touch, responsive, flickable carousels
https://flickity.metafizzy.co
7.53k stars 605 forks source link

Flickity not working inside dynamic tabs #1300

Closed marcopierrard closed 6 months ago

marcopierrard commented 6 months ago

Hello,

I need to have three sliders made by Flickity inside tabs that can be clicked to show each of the sliders. The sliders individually works as expected but there is something broken when I put the sliders inside the tabs. The first tab is activated by default so the first slider inside th etab is shown without problem. But when I click on the second of the third slider, all the content of the slider et on the left. The div of the slider flickity-viewport have the flickity-enabled class activated but all the elements of the slide have position: absolute and left:0px. If I click on inspect element the slider suddently works with all the elements in place, same thing if I just resize the window. I hope I gave enough information to solve this.

Regards

Test case: https://codepen.io/desandro/pen/azqbop

marcopierrard commented 6 months ago

Hello, I've found the solution. If you have the same issue, you should use the resize fonction. You can find how it works here : https://flickity.metafizzy.co/api.html#resize