swiper 自动轮播
时间: 2023-07-22 21:59:34 浏览: 55
要实现 Swiper 的自动轮播,你需要使用 Swiper 的 Autoplay 参数。首先,确保你已经引入了 Swiper 的相关文件。然后,按照以下步骤进行设置:
1. 在 HTML 中,创建一个包含 Swiper 的容器元素,例如:
```html
<div class="swiper-container">
<div class="swiper-wrapper">
<!-- 添加轮播项 -->
<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>
```
2. 在 JavaScript 中,初始化 Swiper 并设置 Autoplay 参数:
```javascript
var swiper = new Swiper('.swiper-container', {
autoplay: {
delay: 3000, // 设置每个轮播项之间的延迟时间(单位为毫秒)
disableOnInteraction: false, // 用户交互后是否停止自动播放
},
pagination: {
el: '.swiper-pagination', // 分页器的容器元素
},
});
```
这样,Swiper 将自动在指定的延迟时间后切换到下一个轮播项,并在容器下方显示分页器。
记得根据你的实际需求修改容器元素的类名以及轮播项的内容和样式。希望这能帮到你!