虽然我是一个喜欢造轮子的人，但是对于 swiper，我还是直接拿过来用了，功能很多，也很方便。本文介绍一些常用的功能。
版本 Swiper 8.3.0
基本用法
<div class="swiper mySwiper"> <div class="swiper-wrapper"> <div class="swiper-slide">Slide 1</div> <div class="swiper-slide">Slide 2</div> <div class="swiper-slide">Slide 3</div> </div> <div class="swiper-pagination"></div> <div class="swiper-button-next"></div> <div class="swiper-button-prev"></div> </div> 复制代码
var swiper = new Swiper(".mySwiper", { /** * 设置Slide的切换效果，默认为"slide"（普通位移切换）， * 还可设置为"fade"（淡入）、"cube"（方块）、"coverflow"（3d流）、 * "flip"（3d翻转）、"cards"(卡片式)、"creative"（创意性）。 */ effect:slide, //自动播放 autoplay:true, // 垂直切换 direction: "vertical", // slider容器能够同时显示的 slides 数量 slidesPerView: 3, // 在slide之间设置距离(px） spaceBetween: 10, // 定义slides的数量多少为一组，就是一页切换多少个slides slidesPerGroup: 3, // 重复 loop: true, /** * 默认情况下Swiper 每次滑动时只滑动一个Slide，并且会自动贴合Wrapper。 * 开启自由模式后，Swiper 会根据惯性滑动可能不止一格且不会贴合。 * * 自由模式影响的是鼠标拖动或touch移动，分页器不受影响。 */ freeMode:false, /** * 居中幻灯片。设定为true时，当前的active slide 会居中，而不是默认状态下的居左。 * * 一般来说，要配置 loop:true 一起使用，否则初始的时候，并没有居中的效果。 */ centeredSlides: true, //左右切换按钮 navigation: { nextEl: ".swiper-button-next", prevEl: ".swiper-button-prev", }, //分页 pagination: { el: ".swiper-pagination", clickable: true, }, on:{ click: function(e){ // 打印当前索引 console.log(e.activeIndex) } }, }); 复制代码
我把所有常用配置的都写上了，不需要哪个直接删除就好。
最外层的 swiper 的样式
margin-left: auto; margin-right: auto; position: relative; 复制代码
并没有设置高宽，需要使用者来设置宽高，如果外层容器比它宽，它会左右居中显示。
内层的 swiper-wraper 的样式
position: relative; width: 100%; height: 100%; z-index: 1; display: flex; transition-property: transform; box-sizing: content-box; 复制代码
大小与 swiper 相同。里面的 swiper-slide 从左到右依次排列。默认效果 effect:'slide'，就是左路右滑动的效果。通过在 swiper-wraper上 每次更改 transform: translate3d(X,0,0) 的 X 值，形成动画。所以我们可以更改通过改变 animation-timing-function 来更改缓动效果。样式中已经指定的 duration 为 2s ，但不会生效，duration 只能通过 js 由 speed 参数来修改。不过，样式中的 0.2s delay 是有效的。
.swiper-wrapper{ /* 通过改变animation-timing-function 制作弹性切换效果 */ transition: 2s cubic-bezier(0.68, -0.4, 0.27, 1.34) 0.2s; } 复制代码
var swiper = new Swiper('.swiper-container', { speed: 2000, navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', }, }); 复制代码
swiper-slider 的样式是
.swiper-slide { flex-shrink: 0; width: 100%; height: 100%; position: relative; transition-property: transform } 复制代码
当给 swiper-slider 加 border 的时候，由于外面的 swiper overflow:hidden会导致 边框显示不全。所以我们需要给 swiper-slider class 增加一条样式
box-sizing:border-box; 复制代码
分页器
pagination: { el: ".swiper-pagination", type: "fraction", } 复制代码
type有几种
- ‘bullets’ 圆点（默认）
- ‘fraction’ 分式 ，形如 (1/10)
- ‘progressbar’ 进度条 ，在顶部的一个细长条，页码越大，长条越长。
或者是自定义
.swiper-pagination-bullet { /*自定义分页器样式 */ } .swiper-pagination-bullet-active { /*自定义 当前 分页器样式 */ } 复制代码
pagination: { el: ".swiper-pagination", clickable: true, //自定义分页器 html renderBullet: function (index, className) { return '<span class="' + className + '">' + (index + 1) + "</span>"; }, }, 复制代码
立体效果
.swiper-slide { transition-duration: .2s; transform: scale(0.8); } .swiper-slide-active,.swiper-slide-duplicate-active{ transform: scale(1); } 复制代码
var swiper = new Swiper('.swiper-container', { slidesPerView: 3, spaceBetween: 30, centeredSlides: true, loop: true, pagination: { el: '.swiper-pagination', clickable: true, }, }); 复制代码
从样式可以看出，是中间大，两边小。加上 transition后，尺寸切换会变得平滑。
左右各露出一部分
.swiper-slide { width: 60%; } 复制代码
var swiper = new Swiper('.mySwiper', { slidesPerView: 'auto', spaceBetween: 60, centeredSlides: true, loop: true, pagination: { el: '.swiper-pagination', clickable: true, }, }); 复制代码
原本是只显示一个 slide，但样式上指定 width: 60%; js 又指定 centeredSlides: true后，左右两边就会有一部分显示出来。
缩略图控制
<div class="swiper swiper-big"> <div class="swiper-wrapper"> <div class="swiper-slide">Slide 1</div> <div class="swiper-slide">Slide 2</div> <div class="swiper-slide">Slide 3</div> <div class="swiper-slide">Slide 4</div> <div class="swiper-slide">Slide 5</div> <div class="swiper-slide">Slide 6</div> </div> <div class="swiper-button-next"></div> <div class="swiper-button-prev"></div> </div> <div class="swiper swiper-small"> <div class="swiper-wrapper"> <div class="swiper-slide">Slide 1</div> <div class="swiper-slide">Slide 2</div> <div class="swiper-slide">Slide 3</div> <div class="swiper-slide">Slide 4</div> <div class="swiper-slide">Slide 5</div> <div class="swiper-slide">Slide 6</div> </div> </div> 复制代码
var swiperSmall = new Swiper(".swiper-small", { loop:true, spaceBetween: 10, slidesPerView: 4, freeMode: true, watchSlidesProgress: true, }); new Swiper(".swiper-big", { loop:true, navigation: { nextEl: ".swiper-button-next", prevEl: ".swiper-button-prev", }, thumbs: { swiper: swiperSmall, }, }); 复制代码
大图 swiper 和小图 swiper 是完全分开的。swiper: swiperSmall 将大小图关联在一起。
小图的 watchSlidesProgress: true 是必须的。 slidesPerView 应该大于1。
要想循环的话，两个 swiper 都需要写上 loop:true
定位锚点
<div class="swiper"> <div class="swiper-wrapper"> <div class="swiper-slide" data-hash="slide1">slider1</div> <div class="swiper-slide" data-hash="slide2">slider2</div> <div class="swiper-slide" data-hash="slide3">slider3</div> </div> </div> 复制代码
new Swiper('.swiper',{ hashNavigation: true, }) 复制代码
视差效果
<div class="swiper-slide"> <div class="title" data-swiper-parallax="-100">从右边100px开始进入</div> <div class="subtitle" data-swiper-parallax="-200">从右边200px开始进入</div> <div class="text" data-swiper-parallax="-300" data-swiper-parallax-duration="600"> <p>从右边300px开始进入，时间600ms</p> </div> <div data-swiper-parallax="0" data-swiper-parallax-opacity="0.5" >透明度变化</div> <div data-swiper-parallax-scale="0.15" >缩放变化</div> </div> </div> 复制代码
var mySwiper = new Swiper('.swiper',{ parallax : true, }) 复制代码
响应式设置
缩小放大网页宽度查看页面效果
breakpoints: { 640: { slidesPerView: 2, spaceBetween: 20, }, 768: { slidesPerView: 4, spaceBetween: 40, }, 1024: { slidesPerView: 5, spaceBetween: 50, }, }, 复制代码
不是阶跃式的变化，而是逐渐变化，这样会对内容有较高的要求。
常用函数
- mySwiper.slideNext(speed, runCallbacks)
- mySwiper.slidePrev(speed,runCallbacks)
- mySwiper.slideTo(index, speed, runCallbacks)
- mySwiper.slideToLoop(index, speed, runCallbacks)
其它应用
除了 slide 切换功能，swiper还可以用作滚动容器，有自定义滚动条。
