swiper常用属性

更多使用

<script>        
  var mySwiper = new Swiper ('.swiper-container', {
    direction: 'vertical', // 垂直切换选项
    loop: true, // 循环模式选项
    
    //自动轮播 autoplay:true
    autoplay: {
    delay: 3000,//自动轮播速度
    //如果设置为true，当切换到最后一个slide时停止自动切换。
    //（loop模式下无效）。
    stopOnLastSlide: false,
    //用户操作swiper之后，是否禁止autoplay。默认为true：停止。
	//如果设置为false，用户操作swiper之后自动切换不会停止，
	//每次都会重新启动autoplay。
    disableOnInteraction: true,
    },
    
    // 如果需要分页器
    pagination: {
      el: '.swiper-pagination',//分页器类名
      bulletClass : 'my-bullet',//pagination分页器内元素的类名。
      bulletActiveClass: 'my-bullet-active',//定义pagination 分页器内当前活动块的指示小点的类名。
	  clickable :true,//此参数设置为true时，点击分页器的指示点分页器会控制Swiper切换。
    },
    
    // 如果需要前进后退按钮
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
    
    // 如果需要滚动条
    scrollbar: {
      el: '.swiper-scrollbar',
    },

	  on: {
	  		//监听slide切换
            slideChangeTransitionEnd: function () {
            	每个slide切换结束时也运行当前slide动画
                swiperAnimate(this); 
                //当前swiper-slide的索引
             	let index=this.realIndex;
             },
             //事件函数，初始化后执行。
              init: function(){
                 swiperAnimateCache(this); //隐藏动画元素
                  swiperAnimate(this); //初始化完成开始动画
              },
       },
        effect: 'coverflow',//slide的切换效果 "coverflow"（3d流）
        //该选项给Swiper用户提供小小的贴心应用，设置为true时
        // 鼠标覆盖Swiper时指针会变成手掌形状，拖动时指针会变成抓手形状
        grabCursor: true,
        //设定为true时，active slide会居中，而不是默认状态下的居左。
        centeredSlides: true,
        //设置slider容器能够同时显示的slides数量(carousel模式)。
        slidesPerView: 3,
        coverflow: {
             rotate: 0, //slide做3d旋转时Y轴的旋转角度。默认50。
             stretch: -stretchNum,//每个slide之间的拉伸值，越大slide靠得越紧。 默认0。
             depth: 200, //slide的位置深度。值越大z轴距离越远，看起来越小。 默认100。
             slideShadows: false //开启slide阴影。默认 true。
       }
  })        
  </script>