Swiper.js中slidesPerView='auto'失效，求动态适配替代方案

当你把Swiper的slidesPerView设为'auto'后只显示单张幻灯片，核心原因是Swiper无法正确计算幻灯片的宽度，导致默认只渲染一张。以下是具体修复方案：

1. 给幻灯片设置明确的宽度约束 #

slidesPerView='auto'的逻辑是根据幻灯片自身宽度计算可显示数量，所以必须给每个SwiperSlide设置基础宽度或最小宽度。结合你用Tailwind的代码风格，直接给幻灯片加样式：

<SwiperSlide
  className="swiper-slide min-w-[120px] w-auto" // 可根据内容调整最小宽度
  key={getValue(item, "id")}
>
  {/* 内部按钮内容 */}
</SwiperSlide>

如果不用Tailwind，也可以写CSS：

.swiper-slide {
  min-width: 120px;
  width: auto;
}

2. 移除断点中固定的slidesPerView配置 #

你当前的breakpoints里每个断点都硬编码了slidesPerView数值，这会直接覆盖'auto'的动态计算逻辑。修改断点配置，只保留spaceBetween的调整：

breakpoints={{
  // Mobile devices
  320: {
    spaceBetween: 10,
  },
  // Small tablets
  640: {
    spaceBetween: 15,
  },
  // Large tablets
  768: {
    spaceBetween: 20,
  },
  // Laptops
  1024: {
    spaceBetween: 25,
  },
  // Desktops
  1280: {
    spaceBetween: 30,
  },
}}

3. 补充Swiper核心配置 #

添加watchSlidesProgress让Swiper实时监控幻灯片宽度变化，可选开启freeMode让滑动更流畅：

<SwiperComponent
  spaceBetween={20}
  slidesPerView='auto'
  centeredSlides={false}
  watchSlidesProgress={true}
  freeMode={true} // 按需开启，不需要可去掉
  className="w-full rounded-lg"
  onInit={(swiper) => {
    swiperRef.current = swiper;
    setIsBeginning(swiper.isBeginning);
    setIsEnd(swiper.isEnd);
  }}
  onSlideChange={(swiper) => {
    setIsBeginning(swiper.isBeginning);
    setIsEnd(swiper.isEnd);
  }}
  breakpoints={/* 上面修改后的断点配置 */}
>
  {/* 幻灯片列表 */}
</SwiperComponent>

修改后的完整代码示例 #

<SwiperComponent
  spaceBetween={20}
  slidesPerView='auto'
  centeredSlides={false}
  watchSlidesProgress={true}
  freeMode={true}
  className="w-full rounded-lg"
  onInit={(swiper) => {
    swiperRef.current = swiper;
    setIsBeginning(swiper.isBeginning);
    setIsEnd(swiper.isEnd);
  }}
  onSlideChange={(swiper) => {
    setIsBeginning(swiper.isBeginning);
    setIsEnd(swiper.isEnd);
  }}
  breakpoints={{
    320: {
      spaceBetween: 10,
    },
    640: {
      spaceBetween: 15,
    },
    768: {
      spaceBetween: 20,
    },
    1024: {
      spaceBetween: 25,
    },
    1280: {
      spaceBetween: 30,
    },
  }}
>
  {allPackageCount?.destination?.map(
    (item: InternationalPAckageCountProps, index: number) => (
      <SwiperSlide
        className="swiper-slide min-w-[120px] w-auto"
        key={getValue(item, "id")}
      >
        <div className="w-full h-full flex items-center justify-center">
          <button
            className={`border-[1px] rounded-full px-4 py-2  ${
              selectedIndex === index
                ? "text-white bg-primary"
                : "text-black hover:text-white hover:bg-primary"
            }`}
            onClick={() => setSelectedIndex(index)}
          >
            {getValue(item, "destination_name")}
          </button>
        </div>
      </SwiperSlide>
    )
  )}
</SwiperComponent>

额外排查点 #

• 确保使用的是Swiper的最新稳定版，旧版本对slidesPerView='auto'的支持可能有bug；
• 检查父容器是否有overflow: hidden或宽度被限制的情况，确保Swiper容器有足够的横向空间；
• 避免自定义CSS覆盖Swiper的默认布局样式，比如不要给.swiper-wrapper设置固定宽度。

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