Flickity js | Images keep overlapping one above another until resize screen

Question

I am trying to make a dynamic Flickity slider so that when you click on the template image, it opens up a slider.

I have an issue with the images that are overlapping one over another so the slider won't work. I can't force display flex on the viewport.

It is important to note that if I resize the window size, the sliders start working properly.

Here is my fiddle https://jsfiddle.net/lennoxe92/20vsj1fg/1/

Carousel-cell's keep getting:

style="position: absolute; left: 0px; transform: translateX(0%);"

instead of:

style="position: absolute; left: 0px; transform: translateX(100%);"

I have tried setting up new Flickity after adding new cells but nothing helps