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