swiper 上下滚动
时间: 2025-04-21 13:45:26 浏览: 27
### 使用 Swiper 组件实现垂直滚动效果
为了使 Swiper 组件能够支持上下方向的滚动,主要在于配置 `direction` 参数为 `'vertical'`。此参数告知 Swiper 应该按照哪个轴线来执行滑动操作[^1]。
对于样式方面,确保给定 Swiper 容器具体的高宽尺寸是非常重要的。这可以通过 CSS 来完成,例如:
```css
.swiper {
height: 200px;
width: 300px;
}
```
上述代码片段定义了一个具有固定高度和宽度的 swiper 容器,这对于触发垂直滚动至关重要[^2]。
当在不同框架下应用时,比如 Vue 或 React 中集成 Swiper 插件,则需遵循相应框架下的初始化流程以及组件注册方式[^3]。
下面是一个简单的 HTML 和 JavaScript 结合的例子展示如何创建一个基本的垂直滚动 Swiper 实例:
```html
<!-- HTML -->
<div class="swiper-container">
<div class="swiper-wrapper">
<!-- 每个 slide 是一个 div 元素 -->
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
</div>
<!-- 如果需要分页器 -->
<div class="swiper-pagination"></div>
<!-- 如果需要导航按钮 -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
```
```javascript
// JS 初始化 Swiper, 设置 direction 为 vertical 即可启用上下滚动功能
var mySwiper = new Swiper('.swiper-container', {
direction : 'vertical',
loop : true,
// 如果使用分页器
pagination: {
el: '.swiper-pagination',
},
// 如果使用前进/后退按钮
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
}
})
```
通过以上方法可以轻松地让 Swiper 支持垂直滚动的效果,并可根据实际需求调整其他选项以满足特定的应用场景。
阅读全文
相关推荐


















