swiper设置上下滚动

Swiper是一个流行的JavaScript库，用于创建响应式的触摸滑动和分页切换效果，常用于网站的轮播图、滚动列表等场景。如果你想在Swiper中实现上下滚动的功能，而不是左右滑动，这通常是通过调整Swiper的配置选项来完成的，因为Swiper默认是设计为水平方向的。

要将Swiper设置为垂直滚动，你可以做以下几步：

1. 引入Swiper库：首先确保已经正确地引入Swiper的JS文件和CSS样式。

<script src="swiper.min.js"></script>
<link rel="stylesheet" href="swiper.css">

2. 创建Swiper实例：使用`new Swiper()`，并指定`direction`属性为`'vertical'`。

var swiper = new Swiper('.swiper-container', {
  direction: 'vertical',
});

3. 定义容器（`.swiper-container`）：确保包含要滚动的内容的元素设置了正确的ID或类名，并且内容的宽度足够高以便于垂直滚动。

<div class="swiper-container">
  <div class="swiper-wrapper">
    <!-- 你的内容 -->
  </div>
</div>

4. 如果你想添加额外的配置，如阻止用户直接滚动页面，你可以设置`scrollbar`选项。

{
  scrollbar: {
    el: '.swiper-scrollbar',
    hide: true, // 隐藏滚动条
    draggable: false, // 用户无法直接滚动页面
  },
}