NextJS中使用SwiperJS出现两个swiper-wrapper冗余空div问题

问题原因 #

Swiper React 组件默认会自动生成swiper-wrapper容器节点，不需要你在<Swiper>标签内部手动声明这一层结构。你手动添加的<div className="swiper-wrapper">会被Swiper识别为普通子内容，导致Swiper判定没有找到直接的SwiperSlide子元素，额外生成一个空的默认wrapper，就出现了两个重复的wrapper节点。

解决步骤 #

• 删掉<Swiper>内部你手动写的<div className="swiper-wrapper">和对应的闭合标签
• 调整后的代码直接将渲染Card的循环作为Swiper的直接子元素即可，参考代码如下：

<Swiper
  slidesPerView={"auto"}
  spaceBetween={30}
  autoHeight
  freeMode={true}
  freeModeSticky
  watchSlidesVisibility={true}
  preloadImages={false}
  resizeObserver={true}
  lazy={true}
>
  {/* 直接循环渲染外层为SwiperSlide的Card组件即可 */}
  {data.map((item: data) => (
    <Card
      data={item}
      swiper
      key={item.id}
    />
  ))}
</Swiper>

• 额外注意你原有代码中循环的参数名和外层数据变量名都是data，建议修改为item之类的不同名称，避免变量冲突引发其他异常。

如果修改后高度仍有异常，可以先临时关闭autoHeight参数排查是否是自适应高度计算的问题。

内容的提问来源于stack exchange，提问作者Maxime Ghéraille