当前位置:清晨 » 站长笔记 » javascript笔记 » swiper常用配置

swiper常用配置

发布日期:2019年9月3日 10:09:55 点击量: 77

宝塔服务器面板,一键全能部署及管理,送你¥3188礼包,点我领取,简单好用的 Linux/Windows 面板

 

 

<script>        
  var mySwiper = new Swiper ('.swiper-container', {
                    autoplay: {
                        delay:5000,//秒            
                        disableOnInteraction: false,//滑动不会失效
                        reverseDirection: false,//如果最后一个 反向播放
                    },
                    loop: true,//轮播
                    followFinger: false,//手指滑动完毕在动
    // 如果需要分页器
      pagination: {
        el: '.swiper-pagination',
        clickable: true,
        renderBullet: function (index, className) {
          return '<span class="' + className + '">' + (index + 1) + '</span>';
        },
      },
    
    // 如果需要前进后退按钮
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
    
  });
    mySwiper.el.onmouseover = function(){ //鼠标放上暂停轮播
      mySwiper.autoplay.stop();
    }
    mySwiper.el.onmouseleave = function(){
      mySwiper.autoplay.start();
    }
  </script>

 

 

 

 

 


关键词:

本文网址:https://www.menglei.info/2966/,转载请以链接形式注明出处,谢谢合作!

swiper

老薛主机专属优惠码: PT ,有需要购买的同学可以使用.可享受30%的优惠.

联系站长: shadoweb@qq.com QQ: 925474725

上一篇:

下一篇: 没有了

发表评论

电子邮件地址不会被公开。 必填项已用*标注