Swiper JS V8实现仅显示1项的垂直滑块运行异常问题

你的垂直Swiper无法运行核心是遗漏了垂直模式的必填要求：

• Swiper垂直滑动模式强制要求.swiper容器设置明确的固定高度，你现有代码没有添加对应样式，Swiper无法计算滑动偏移量，会直接把所有slide纵向平铺展示，完全不触发滑动逻辑。水平模式下Swiper默认会撑满父容器宽度，不需要手动设宽，但垂直模式不会自动撑高，这是最容易踩的适配坑。
• 初始化配置没有显式声明slidesPerView: 1，虽然该参数默认值为1，但在缺失容器高度的场景下会直接导致滑块初始化失效。
• 你当前的资源引入顺序、jQuery ready回调逻辑没有问题，不是加载时序导致的故障。

1. 先给Swiper容器添加固定高度样式，高度值可以根据实际业务需求调整：

.swiper {
  height: 320px;
}

2. 补全初始化配置里的单屏显示参数，修正后的完整初始化代码如下：

jQuery(document).ready(function ($) {
  const swiperSettings = {
    direction: "vertical",
    slidesPerView: 1,
    navigation: {
      nextEl: ".swiper-button-next",
      prevEl: ".swiper-button-prev"
    }
  };
  const termsSwiper = new Swiper(".swiper", swiperSettings);
});

如果后续需要滑块高度跟随当前slide内容自适应，不要删除容器高度规则，直接在配置里添加autoHeight: true即可，Swiper会自动计算每个slide的高度适配容器，不会出现布局错乱。

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