Ionic React中SwiperJS图片堆叠而非轮播的问题排查

你遇到的幻灯片堆叠、滑动后空位问题，主要是以下几个遗漏点导致的，对应修复方法如下：

1. 缺失Swiper核心样式导入 #

Swiper依赖自带的CSS实现正确布局逻辑，未导入样式时幻灯片会默认堆叠显示。在组件文件顶部添加样式导入：

import 'swiper/css';
// 如果需要分页、导航等组件，额外导入对应样式，比如：
// import 'swiper/css/pagination';

2. 图片未设置自适应宽度 #

原生img标签不会默认自适应父容器宽度，导致幻灯片内容无法填满容器，引发布局异常。给图片添加样式确保宽度100%：

<img 
  src={screenshot.path_full} 
  alt={screenshot.id.toString()} 
  style={{ width: '100%', height: 'auto' }}
/>

3. IonCard默认样式干扰 #

IonCard自带margin和padding，会占用额外宽度导致幻灯片无法正确排列。可以直接去掉IonCard，或者重置其样式：

<IonCard style={{ width: '100%', margin: 0, padding: 0 }}>
  {/* 图片内容 */}
</IonCard>

完整修复后的代码示例 #

import { Swiper, SwiperSlide } from 'swiper/react';
import 'swiper/css';

// ...其他业务代码

<Swiper
  slidesPerView={1}
  spaceBetween={10} // 可选，添加幻灯片间距提升视觉效果
>
  {game.data.screenshots.map((screenshot) => (
    <SwiperSlide key={screenshot.id}>
      <img 
        src={screenshot.path_full} 
        alt={screenshot.id.toString()} 
        style={{ width: '100%', height: 'auto' }}
      />
    </SwiperSlide>
  ))}
</Swiper>

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