Swiper 是目前应用较广泛的移动端网页触摸内容滑动js插件。不需要自己去重复造轮子使用方便，节省时间精力还做到了非常好的兼容。把常用到的参数总结如下，方便日后需要查看：

一次显示多个slides

demo演示

var swiper = new Swiper('.swiper-container', {
      slidesPerView: 3,  // 显示的数目
      spaceBetween: 30,  // 元素之间的距离
});

循环效果

demo演示

var swiper = new Swiper('.swiper-container', {
  loop: true,  // 循环轮播
});

自动播放

demo演示

var swiper = new Swiper('.swiper-container', {
  autoplay: {
    delay: 2500,  // 循环时间
    disableOnInteraction: false, // 用户操作swiper之后，是否禁止autoplay]。默认为true：停止。
  },
});

切换样式

slide的切换效果
默认为"slide"（位移切换），可设置为'slide'（普通切换、默认）
"fade"（淡入）
"cube"（方块）
"coverflow"（3d流）
"flip"（3d翻转）。

var swiper = new Swiper('.swiper-container', {
  effect : 'fade',
});

左右切换按钮

<!-- Add Arrows -->
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>

// 左右按钮
navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
},

按钮样式自定义

/* 按钮样式自定义 */
.swiper-container{
--swiper-theme-color: #ff6600;/* 设置Swiper风格 */
--swiper-navigation-color: #00ff33;/* 单独设置按钮颜色 */
--swiper-navigation-size: 80px;/* 设置按钮大小 */
}

弹性切换

// 弹性切换
speed: 1000,

可以自定义 改变Swiper切换的时间曲线

/* 改变Swiper切换的时间曲线 */
.swiper-wrapper{
    /* transition-timing-function: ease-in-out; */
    /* transition-timing-function: ease-out; */
    transition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
}

分页器

<!-- Add Pagination -->
<div class="swiper-pagination"></div>

 .swiper-container{
    --swiper-theme-color: #ff6600;
    --swiper-pagination-color: #00ff33;/* 两种都可以 */
  }

// 分页器
pagination: {
    el: '.swiper-pagination',
     type: 'bullets',
    //type: 'fraction',
    //type : 'progressbar',
    //type : 'custom',
},

type 值改变分页器样式

分页器样式类型，可选
‘bullets’ 圆点（默认）
‘fraction’ 分式
‘progressbar’ 进度条
‘custom’ 自定义

分页器 / 动态指示点

pagination: {
    el: '.swiper-pagination',
    dynamicBullets: true,
},

自定义指示器

el: '.swiper-pagination',
    clickable: true,    // 此参数设置为true时，点击分页器的指示点分页器会控制Swiper切换。
    renderBullet: function (index, className) {
      return '<span class="' + className + '">' + (index + 1) + '</span>';
    },

滚动条

scrollbar: {
    el: '.swiper-scrollbar',
    hide: true,
},

触摸比例

触摸比例。触摸距离与slide滑动距离的比率。
可以解决一直滑动多个 slide 的问题
https://www.swiper.com.cn/api/touch/55.html

touchRatio : 0.1,

渲染分页器小点

渲染分页器小点。这个参数允许完全自定义分页器的指示点。接受指示点索引和指示点类名作为参数。
可以自定义分页的文字等
https://www.swiper.com.cn/api/pagination/70.html

var swiper = new Swiper('.swiper-container', {
  pagination: {
        el: '.swiper-pagination',
        clickable: true,
        renderBullet: function (index, className) {
          return '<span class="' + className + '">' + (index + 1) + '</span>';
        },
     /* renderBullet: function (index, className) {
          switch(index){
            case 0:text='壹';break;
            case 1:text='贰';break;
            case 2:text='叁';break;
            case 3:text='肆';break;
            case 4:text='伍';break;
          }
          return '<span class="' + className + '">' + text + '</span>';
        },*/
  },
});