摘要：
Swiper.js是一个由纯JavaScript制成的滑动特效插件，可用于实现检查点旋转图和选项卡触摸滑动开关等常见效果。首先我们介绍了swiper.min.css和swiper.min.jsHTML部分Slide1Slide2Slide3-如果您需要寻呼机--˃˃=“scriber button next”˃CSS部分中的所有演示都是相同的。刷卡器容器｛宽度：100%；高度：100%；｝。滑动幻灯片｛text-align:center；字体大小：18px；背景：#fff；/*Centerslideextvertical*/display:-webkit box；display:-ms-flexbox；display:-webkit flex；display:flex；-webkit box-pack:center，-ms-flex-pack:center根据您下载的不同演示，您需要在演示下面进行演示，例如：varswipper=newswiper；您可以用自己的图像替换滑动幻灯片中的幻灯片1，这种效果是完整的。
swiper.js是一款纯JavaScript打造的滑动特效插件，可以用来实现检点轮播图，tab触摸滑动切换等常用效果。下载地址：https://www.swiper.com.cn/download/index.html#file1
swiper.js提供给我们很多种不同的demo效果，我们可以根据自己的需求来选择自己需要。所有demo的HTML部分，CSS几乎是一样的,不一样的是调用的js方法，或配置的参数不同来达到不同的效果。
使用方法
首先我们引入 swiper.min.css和 swiper.min.js
HTML部分
<div class="swiper-container"> <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-prev"></div> <div class="swiper-button-next"></div> <!-- 如果需要滚动条 --> <div class="swiper-scrollbar"></div> </div>
CSS部分 所有的demo是一样的
.swiper-container { width: 100%; height: 100%; } .swiper-slide { text-align: center; font-size: 18px; background: #fff; /* Center slide text vertically */ display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; }
js部分可以根据自己下载的demo不同来选取自己需要的demo下的js部分代码
例如：
var swiper = new Swiper('.swiper-container', { slidesPerView: 3, spaceBetween: 30, slidesPerGroup: 3, loop: true, pagination: { el: '.swiper-pagination', clickable: true, }, navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', }, });
你可以把swiper-slide里面Slide 1替换成自己的图片，这样这个效果就完成的了。
其中里面的参数
slidesPerView： 显示几张图片
spaceBetween：图片之间的间距
slidesPerGroup：定义slides的数量多少为一组，在旋转模式下有效。其实就是滑动的时候一下滑动几张图片了。
loop：图片是否循环播放
上面这个轮播图是不会自己播放的，要自己播放，得自己手动添加autoplay:true及自动播放
更多参数设置请参考官网 https://www.swiper.com.cn/api/autoplay/112.html 或 http://www.xiaoshu168.com/jquery/103.html