Swiper.js单幻灯片卡片问题：图片重复且翻转时裁剪

问题原因 #

1. 图片重复：Swiper默认在启用loop模式（或内部无缝滑动机制）时会克隆幻灯片，单幻灯片场景下克隆元素会和原幻灯片一同显示，叠加translate3d变换后就出现重复效果。
2. 翻转裁剪：Swiper容器默认设置overflow: hidden，卡片应用3D翻转变换时，超出容器范围的部分会被裁剪；同时缺少backface-visibility: hidden属性，可能导致元素背面或克隆体异常显示。

解决方案 #

1. 调整Swiper初始化配置

关闭循环克隆机制，禁用不必要的触摸交互（若无需滑动功能）：

const swiper = new Swiper('.swiper-container', {
  loop: false, // 核心：关闭循环，阻止幻灯片克隆
  allowTouchMove: false, // 不需要滑动时关闭触摸，避免额外渲染
  slidesPerView: 1,
  spaceBetween: 0
});

2. 修正CSS样式

• 给3D变换元素添加背面隐藏，避免异常显示：

.fg, .bg {
  backface-visibility: hidden;
  transform-style: preserve-3d;
}

• 调整容器溢出规则，解决翻转裁剪：
  若要显示翻转后的完整卡片，将Swiper容器的overflow改为visible（若需保持容器边界，也可适当增大容器尺寸）：

.swiper-container {
  overflow: visible;
}

• 确保幻灯片定位正确：

.swiper-slide {
  position: relative;
  width: 100%;
  height: 100%;
}

3. 验证效果

完成上述修改后，克隆的幻灯片会被移除，3D变换时元素不再重复，同时翻转过程中卡片内容也不会被容器裁剪。

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