weixin_51563603
2021-02-02 14:01 阅读 35

怎么用用Swiper写自动轮播图

请问各位大佬前端里怎么用Swiper写自动轮播图呢?我已经下载了对应的min js和min css的文件,但是我在Swiper基础演示里并没有找到自动轮播的窗口啊。。怎么办(原谅下我没有支付酬金。。我第一次用csdn)

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享

3条回答 默认 最新

  • 已采纳
    as_csdn 代码的灵魂是bug! 2021-02-02 14:11
    <script>
        var swiper = new Swiper('.swiper-container', {
          spaceBetween: 30,
          centeredSlides: true,
          autoplay: {
            delay: 2500,
            disableOnInteraction: false,
          },
          pagination: {
            el: '.swiper-pagination',
            clickable: true,
          },
          navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
          },
        });
      </script>

     

    点赞 1 评论 复制链接分享
  • Tinkerbaby 斋藤肥鸟 2021-02-02 17:20

    你可以在API文档里找,各种效果无非都是设置各种参数,自动播放是autoPlay:

    https://www.swiper.com.cn/api/autoplay/16.html

    点赞 1 评论 复制链接分享
  • qq_16214711 土上小怪 2021-02-04 14:34

    https://www.swiper.com.cn/demo/280-autoplay.html
     

    var swiper = new Swiper('.swiper-container', {
          spaceBetween: 30,
          centeredSlides: true,
          autoplay: {
            delay: 2500,
            disableOnInteraction: false,
          },
          pagination: {
            el: '.swiper-pagination',
            clickable: true,
          },
          navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
          },
        });

    这个是swiper上面自动播放的api,可以参考一下。主要是设置autoplay这个属性,delay是设置间隔时间。

    点赞 1 评论 复制链接分享

相关推荐