要使 Swiper 自动播放,你可以使用 Swiper 的 Autoplay 参数。下面是一个简单的示例:
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>
<!-- 添加 navigation 和 pagination -->
<div class="swiper-pagination"></div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
JavaScript:
var swiper = new Swiper('.swiper-container', {
autoplay: {
delay: 3000, // 每个 slide 自动切换之间的延迟时间(单位为毫秒)
disableOnInteraction: false // 用户交互时是否停止自动切换
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev'
},
pagination: {
el: '.swiper-pagination'
}
});
上述代码将创建一个带有自动播放、导航按钮和分页器的 Swiper 实例。你可以根据需要调整参数值和样式来满足你的需求。记得在页面引入正确的 Swiper 库文件或链接到 CDN。
内容由零声教学AI助手提供,问题来源于学员提问