关于swiper常用参数总结

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,
},