React中使用SwiperJS向右滑动时幻灯片消失问题求助

我在React项目里用SwiperJS实现循环轮播时碰到了异常，具体表现看下方演示图：

我的实现代码如下：

<Swiper
  spaceBetween={10}
  slidesPerView={5}
  speed={500}
  direction={'horizontal'}
  loop={true}
  centeredSlides={true}
  loopedSlides={5}
  roundLengths={true}
  modules={[Navigation]}
  navigation={{
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  }}>
  {skills.map((skill, index) => (
    <SwiperSlide className='flex justify-center align-center '>
      <div className='relative bg-white py-6 px-6 rounded-3xl w-56 my-9 shadow-xl'>
        <div
          className={` text-white flex items-center absolute rounded-full py-4 px-4 shadow-xl ${skill.color} left-4 -top-6`}>
          {createElement(skill.icon.type, {
            className: `w-8 h-8`,
          })}
        </div>
        <div className='mt-8'>
          <p className='text-xl font-semibold my-2'>{skill.title}</p>
          <StarContainer enjoyment={skill.appreciation} />
        </div>
        <div className='border-t-2'></div>
        <div className='font-semibold italic mt-3'>
          <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit.</p>
        </div>
      </div>
    </SwiperSlide>
  ))}
</Swiper>
<div className='swiper-button-prev left-0'></div>
<div className='swiper-button-next right-0'></div>

问题排查与修复方案 #

1. 修正loopedSlides配置
   loopedSlides必须与实际幻灯片数量（即skills数组长度）一致，不能固定写死为5。改成loopedSlides={skills.length}，否则循环逻辑会出现混乱。

2. 添加唯一key属性
   循环渲染SwiperSlide时缺少唯一key，React无法正确追踪每个幻灯片的状态，会导致循环滑动时DOM异常。在SwiperSlide上添加key={index}（如果有唯一ID用key={skill.id}更稳妥）。

3. 修复Tailwind类名错误
   原代码里的align-center是无效的Tailwind类，垂直居中应该用items-center，错误类名会影响幻灯片布局，进而导致滑动异常。

4. 调整导航按钮位置
   导航按钮放在Swiper组件外部可能导致初始化时无法被正确识别，建议移到Swiper标签内部，确保Swiper能正确绑定导航元素。

5. 移除roundLengths属性
   该属性会强制把滑动长度取整，在centeredSlides和loop同时启用时，容易造成滑动距离计算偏差，先尝试移除它。

修改后的代码 #

<Swiper
  spaceBetween={10}
  slidesPerView={5}
  speed={500}
  direction={'horizontal'}
  loop={true}
  centeredSlides={true}
  loopedSlides={skills.length}
  modules={[Navigation]}
  navigation={{
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  }}>
  {skills.map((skill, index) => (
    <SwiperSlide key={index} className='flex justify-center items-center'>
      <div className='relative bg-white py-6 px-6 rounded-3xl w-56 my-9 shadow-xl'>
        <div
          className={`text-white flex items-center absolute rounded-full py-4 px-4 shadow-xl ${skill.color} left-4 -top-6`}>
          {createElement(skill.icon.type, {
            className: `w-8 h-8`,
          })}
        </div>
        <div className='mt-8'>
          <p className='text-xl font-semibold my-2'>{skill.title}</p>
          <StarContainer enjoyment={skill.appreciation} />
        </div>
        <div className='border-t-2'></div>
        <div className='font-semibold italic mt-3'>
          <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit.</p>
        </div>
      </div>
    </SwiperSlide>
  ))}
  <div className='swiper-button-prev left-0'></div>
  <div className='swiper-button-next right-0'></div>
</Swiper>

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