Swiper JS无法按容器高度动态显示对应数量幻灯片求助

我使用Swiper JS库，期望实现：当容器高度为90px时显示3张幻灯片，容器高度为200px时显示6张幻灯片。但当前无论容器高度如何，始终仅显示3张幻灯片，无法按需求展示对应数量的幻灯片。

原代码示例 #

JavaScript #

// Wheel animation
var swiper = new Swiper(".mySwiper", {
  effect: "creative",
  // slidesPerView: 8,
  slidesPerView: 'auto',
  visibilityFullFit: true,
  autoResize: false,
  // initialSlide: 6,
  loop: true,
  // loopedSlides: 6,
  spaceBetween: 10,
  grabCursor: true,
  centeredSlides: true,
  creativeEffect: {
    perspective: true,
    limitProgress: 2,
    progressMultiplier: 1,
    prev: {
      translate: ["-70px", "10px", 0],
      rotate: [0, 0, -15],
      origin: "bottom",
      scale: 0.75,
      opacity: 0.5,
    },
    next: {
      translate: ["70px", "10px", 0],
      rotate: [0, 0, 15],
      origin: "bottom",
      scale: 0.75,
      opacity: 0.5,
    }
  },
});

CSS #

.wheel-container {
  position: absolute;
  bottom: 0;
  width: 100vw;
  height: 400px;
  background-color: rgba(0, 0, 0, 0.3);
  border-top: 1px solid #fff;
  border-radius: 50%;
}

.wheel-level1 {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
}

.swiper {
  width: 100%;
  padding-top: 50px;
  padding-bottom: 50px;
}

.swiper-slide {
  background-position: center;
  background-size: cover;
  width: 300px;
  height: 300px;
}

.swiper-slide img {
  display: block;
  width: 100%;
}

.swiper-slide {
  width: 60px;
  height: 60px;
  border-radius: 5px;
}

.box1 {
  background-color: #8C464E;
}

.box2 {
  background-color: #975F4B;
}

.box3 {
  background-color: #E3077E;
}

.box4 {
  background-color: #E30707;
}

.box5 {
  background-color: #FFAF9B;
}

.swiper-slide-active {
  border: 1px solid #fff;
}

HTML #

<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/8.4.3/swiper-bundle.min.js"></script>
<div class="wheel-container">
  <div class="wheel-level1">
    <!-- Slider main container -->
    <div class="swiper mySwiper">
      <div class="swiper-wrapper">
        <div class="swiper-slide box1"></div>
        <div class="swiper-slide box2"></div>
        <div class="swiper-slide box3"></div>
        <div class="swiper-slide box4"></div>
        <div class="swiper-slide box5"></div>
      </div>
      <div class="swiper-pagination"></div>
    </div>
  </div>
</div>

问题原因及修复方案 #

核心问题 #

1. slidesPerView: 'auto'结合creative特效时，Swiper不会自动根据容器高度计算显示数量，只会依据幻灯片宽度适配。
2. visibilityFullFit和autoResize是Swiper旧版本的配置项，在8.x版本中已废弃，完全不起作用。

修复代码 #

JavaScript

// 初始化Swiper函数，根据容器高度计算显示数量
function initSwiper() {
  const container = document.querySelector('.wheel-level1');
  const containerHeight = container.offsetHeight;
  // 按需求设置显示数量：高度≥200px显示6张，否则显示3张
  const slidesPerView = containerHeight >= 200 ? 6 : 3;

  // 销毁旧实例避免冲突
  if (window.swiper) {
    window.swiper.destroy(true, true);
  }

  // 创建新实例
  window.swiper = new Swiper(".mySwiper", {
    effect: "creative",
    slidesPerView: slidesPerView,
    loop: true,
    spaceBetween: 10,
    grabCursor: true,
    centeredSlides: true,
    creativeEffect: {
      perspective: true,
      limitProgress: 2,
      progressMultiplier: 1,
      prev: {
        translate: ["-70px", "10px", 0],
        rotate: [0, 0, -15],
        origin: "bottom",
        scale: 0.75,
        opacity: 0.5,
      },
      next: {
        translate: ["70px", "10px", 0],
        rotate: [0, 0, 15],
        origin: "bottom",
        scale: 0.75,
        opacity: 0.5,
      }
    },
  });
}

// 首次初始化
initSwiper();

// 监听窗口尺寸变化，容器高度改变时重新初始化
window.addEventListener('resize', initSwiper);

关键说明 #

1. 新增initSwiper函数，动态读取容器高度并计算slidesPerView值。
2. 每次窗口 resize 时重新初始化Swiper，确保显示数量随容器高度实时调整。
3. 移除无效配置项，避免干扰Swiper正常逻辑。
4. 初始化前销毁旧实例，防止重复创建导致的功能冲突。

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