嘿，我来帮你搞定这个轮播的问题～你遇到的所有图片重叠、只显示最后一张的情况，根源出在**.carousel-cell的宽度设置**上。

问题原因分析 #

你给.carousel-cell设置了width: 100%，这会让每个轮播单元格都占满整个轮播容器的宽度。Flickity默认是把这些单元格横向排列的，结果就是所有单元格都叠在了同一个位置，最后一个单元格自然覆盖在最上层，看起来像是重复显示了同一张图，其他图片根本没机会露出来。

解决方案 #

调整.carousel-cell的宽度，给轮播单元格留出并排排列的空间。比如你可以把宽度改成80%（或者你想要的任意小于100%的数值），这样Flickity就能正常管理这些单元格的横向排列和滑动了。

如果确实需要全屏宽度的轮播（每个单元格占满容器），那你需要去掉data-flickity里的"contain": true配置，同时确保Flickity的滑动逻辑能正常触发——不过先解决重叠问题，我们先调整宽度：

修改后的CSS代码 #

.main-carousel {
  width: 90%;
  align-items: center;
  margin-top: 1%;
  margin-left: 5%;
  height: 420px;
}
.carousel-cell {
  width: 80%; /* 调整为小于100%的宽度，让单元格能并排 */
  padding-left: 10px;
  height: 400px;
  background: #fff;
  /* center images in cells with flexbox */
  display: flex;
  align-items: center;
  justify-content: center;
}
.carousel-cell img {
  display: block;
  max-height: 100%;
}

全屏轮播的补充方案（如果需要） #

如果你想要每个滑动项都占满整个容器宽度，那可以把.carousel-cell的宽度保持100%，但修改Flickity的配置，去掉"contain": true，同时确保容器的溢出设置正确：

<div class="main-carousel" data-flickity='{ "cellAlign": "left", "wrapAround": true }'>
  <!-- 轮播内容不变 -->
</div>

这样Flickity就会按照全屏宽度的单元格来滑动，不会出现重叠问题。

验证效果 #

修改后刷新页面，你应该就能看到所有图片正常排列，并且可以通过滑动切换了。

内容的提问来源于stack exchange，提问作者Marco