swiper.js使用心得

var swiper = new Swiper('.swiper-container', {  ——请勿全部复制，根据需要添加子项
      spaceBetween: 30, //slide之间距——间距30
  		resistanceRatio : 0,//禁止反弹
      slidesPerView: 'auto', //多列——宽度自动
      slidesPerGroupSkip: 3, //设置 前n个不列入分组 ——前3个不列入分组，将单独出现
 
 
      slidesPerView: 4, // 多列——一屏显示4列
      centeredSlides: true, // 多列居中显示
      slidesPerGroup: 3, //多列分组，一次滚动一组——分3组
      freeMode: true, // 多列任意滚动
 
      slidesPerColumn: 2, //多行 —— 一屏显示2行
 
      loop: true, //开启循环滚动，从头尾相接
      loopFillGroupWithBlank: true, //循环滚动相接处填充空白区分头尾
 
      autoplay: { //自动切换
        delay: 2500, //时延
        disableOnInteraction: false,
      },
 
      lazy: true, //懒加载
 
 
      direction:vertical, //滚动方向 vertical：垂直  horizontal：水平
    
      autoHeight: true, //滚动高度自动
 
      effect: 'fade', //切换效果-淡入淡出
      effect: 'flip', //切换效果-翻转
      effect: 'coverflow', //切换效果-歌曲封面效果 
      coverflowEffect: {  //歌曲封面效果设置
        rotate: 50,
        stretch: 0,
        depth: 100,
        modifier: 1,
        slideShadows : true,
      },
      effect: 'cube', //3D立体切换效果
      cubeEffect: { //3D立体切换效果设置
        shadow: true,
        slideShadows: true,
        shadowOffset: 20,
        shadowScale: 0.94,
      },
 
      parallax: true,//开启视差滚动 ——以下为视差html设置，data-swiper-parallax是出现时间
      /*<div class="swiper-slide">
	        <div class="title" data-swiper-parallax="-300">Slide 1</div>
	        <div class="subtitle" data-swiper-parallax="-200">Subtitle</div>
	        <div class="text" data-swiper-parallax="-100">
	          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dictum mattis velit, sit amet faucibus felis iaculis nec. Nulla laoreet justo vitae porttitor porttitor. Suspendisse in sem justo. Integer laoreet magna nec elit suscipit, ac laoreet nibh euismod. Aliquam hendrerit lorem at elit facilisis rutrum. Ut at ullamcorper velit. Nulla ligula nisi, imperdiet ut lacinia nec, tincidunt ut libero. Aenean feugiat non eros quis feugiat.</p>
	        </div>
      </div> */
 
      grabCursor: true, //鼠标样式变抓手
 
      keyboard: { enabled: true }, //键盘控制，上下左右
 
      navigation: { //左右切换
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
 
    breakpoints: {  //根据屏幕调整参数，类似css媒体查询，可以是分辨率：320，也可以是点密度：@1.00
        320: {  //当屏幕宽度大于等于320
          slidesPerView: 2,
          spaceBetween: 10
        },
        768: {  //当屏幕宽度大于等于768 
          slidesPerView: 3,
          spaceBetween: 20
        },
        1280: {  //当屏幕宽度大于等于1280
          slidesPerView: 4,
          spaceBetween: 30
        }
      }
     
      mousewheel: true, //鼠标滚动切换开启
 
      pagination: { //分页器 ——请勿全部复制，根据需要添加子项
        el: '.swiper-pagination'，//绑定分页元素
        clickable: true,   //可点击，可拖拽切换
        dynamicBullets: true, //分页器大小变化
        type: 'progressbar', //进度条分页
        type: 'fraction', //数字切换 1/10
        renderBullet: function (index, className) { // 数字分页 1 2 3 ....
          return '<span class="' + className + '">' + (index + 1) + '</span>';
        },
      },
 
      scrollbar: { // 滚动进度条 ，html需要有swiper-scrollbar元素
        el: '.swiper-scrollbar',
        hide: true,
      },
 
           //   swiper.el.onmouseover = function () {
        //     //鼠标放上暂停轮播
        //     swiper.autoplay.stop();
        //   };
        //   swiper.el.onmouseleave = function () {
        //     swiper.autoplay.start();
        //   };
});