如何解决垂直方向Swiper不设置固定高度时出现无限高度的问题

解决方案 #

你要的效果可以通过开启Swiper内置的autoHeight配置实现，配合少量CSS调整即可，你原有代码里的allowTouchMove: false已经满足禁止触摸/鼠标滑动切换的需求，无需额外修改。

1. JS配置修改 #

在Swiper初始化参数中新增autoHeight: true，开启容器高度自动适配当前slide的能力：

var swiper = new Swiper(".mySwiper", {
    direction: "vertical",
    speed: 600,
    allowTouchMove: false,
    autoHeight: true, // 新增这一行开启高度自适应
    pagination: {
        el: ".swiper-pagination",
        clickable: true,
    },
});

2. CSS调整 #

删除Swiper容器的固定高度限制，同时将slide的高度设置为auto，取消默认的100%高度继承：

/* 去掉原有重复的.swiper样式，合并为以下内容 */
.swiper {
    width: 100%;
    max-height: 500px; /* 你原来的最大高度限制可以保留 */
}

.swiper-slide {
    height: auto; /* 新增这一行，让slide高度适配自身内容 */
    text-align: center;
    font-size: 18px;
    /* 原有flex布局的代码保留即可 */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}

效果说明 #

配置完成后，Swiper容器会在初始化、分页切换时自动读取当前激活slide的内容高度，动态调整容器高度，不会出现无限高度的问题，同时只能通过点击分页器切换，无法手动滑动。

内容的提问来源于stack exchange，提问作者h.m.p.frontendDeveloper