Javascript 如何在使用鼠标移动效果时修复旋转木马中的背景图像重叠

我正在尝试使用具有鼠标移动效果的Flickity旋转木马。旋转木马中有3个背景图像。除转盘从第三个图像过渡到第一个图像外，所有操作都正常，第三个图像显示一秒钟（在第一个图像的顶部），然后消失。如果看到这一点会有所帮助，请看以下内容：

我尝试过使用z-index的各种方法，但这只是改变了问题发生的地方。任何帮助都将不胜感激

以下是相关代码： HTML

CSS

试试这个：

#carousel-cell-image1, #carousel-cell-image2, #carousel-cell-image3{
    width: 100%;
    background-repeat: no-repeat;
}

---

用它替换代码

#carousel-cell-image1, #carousel-cell-image2, #carousel-cell-image3{
width: 100%;
left:-2%;
top:-2%;
height: 512px;
position: absolute;
background-size: cover;
background-position: center;
transform: scale(1.1);
}

---

梅希纳，不幸的是，这不起作用（我更新了上面的链接以便你能看到结果。我尝试了宽度：100%，然后图像没有重叠。@Newsong80Hm，对我来说仍然重叠。你和我之间有什么不同？我现在知道了，这与mousemove效果无关。我甚至把它拿出来，它仍然重叠。这一定是Flickity旋转木马。使用sli如果可以更改滑块，请使用ck slider代替此选项。@Newsong80Akash，结果没有更改。我尝试了下面的建议。其他人知道吗？

#carousel-cell-image1, #carousel-cell-image2, #carousel-cell-image3{
width: 100%;
left:-2%;
top:-2%;
height: 512px;
position: absolute;
background-size: cover;
background-position: center;
transform: scale(1.1);
}