Flickity js |图像不断重叠，直到调整屏幕大小

Question

我正在尝试制作一个动态 Flickity 滑块，以便当您单击模板图像时，它会打开一个滑块。

我遇到了图像相互重叠的问题，因此滑块无法工作。我无法在视口上强制显示弯曲。

需要注意的是，如果我调整窗口大小，滑块就会开始正常工作。

这是我的小提琴https://jsfiddle.net/lennoxe92/20vsj1fg/1/

轮播细胞不断获得：

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

而不是：

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

我尝试在添加新单元格后设置新的 Flickity，但没有任何帮助

Answer 1

我注意到了和你一样的问题。但是当调整窗口大小时，会触发事件并重新计算大小，因此我在调整窗口大小时使用了强制事件调用。

window.dispatchEvent(new Event('resize'));

我什至尝试每 200 毫秒调用一次这些事件来重新计算 flickity 的大小。这不是一个非常优雅的解决方案，但尺寸正确并且幻灯片不重叠。