ZBLOG

swiper 自动播放

要使 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助手提供,问题来源于学员提问

本站部分文章来源于网络,版权归原作者所有,如有侵权请联系站长删除。
转载请注明出处:https://golang.0voice.com/?id=16699

分享:
扫描分享到社交APP
上一篇
下一篇
发表列表
游客 游客
此处应有掌声~
评论列表

还没有评论,快来说点什么吧~

联系我们

在线咨询: 点击这里给我发消息

微信号:3007537140

上班时间: 10:30-22:30

关注我们
x

注册

已经有帐号?