Swiper.js垂直方向滑块出现无限高度问题求助

当你设置direction: 'vertical'且开启freeMode: true时，Swiper无法自动计算容器总高度，再配合slidesPerView: 3的配置，就会出现容器高度无限延伸的问题。以下是几种可行的解决方式：

• 手动指定容器高度
  给滑块容器.imgWithTextSlider添加固定高度，高度值可根据单张幻灯片高度乘以3，再加上间距总和计算：

  .imgWithTextSlider {
    height: calc(3 * 200px + 2 * 15px); /* 假设单张幻灯片高200px，间距15px，可按需调整 */
  }
  

• 开启自动高度计算（推荐）
  在Swiper初始化配置中添加autoHeight: true，让Swiper自动根据幻灯片内容计算容器高度：

  function imgWithTextSlider() {
     var swiper = new Swiper(".imgWithTextSlider", {      
        slidesPerView: 3,
        spaceBetween: 15,
        direction: 'vertical',       
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
        freeMode: true,
        autoHeight: true // 新增自动高度配置
      });
  }
  

• 修复幻灯片内部高度塌陷
  如果幻灯片内元素存在浮动、绝对定位等导致高度无法被正确计算的情况，给幻灯片添加布局规则：

  .swiper-slide {
    display: flex;
    flex-direction: column;
    min-height: 100%;
  }
  

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