最近正在做一个PC端和移动端的项目 正好用到了swiper 今天给大家拿来讲讲

swiper的官网http://www.swiper.com.cn/ 博主用的是4.0的版本 如果大家用的是3.0的版本可以将我列的api到官网3.0的去搜索相应的使用

在官网上下载了swiper包后解压到你文件夹中  需要用到的就2个文件 解压后进入目录dist文件夹 将swiper.min.js和swiper.min.css2个文件放到你的项目文件夹中 这里我用的是压缩后的 如果大家想看源码的可以使用.css文件

我这里都是用的4.0的版本 如果是3.0的可以将我下面这些api和属性到官网的3.0中搜索相应的使用

以上准备工作完成后下面开始使用------------

1.将swiper.min.js和swiper.min.css2个文件引入到你的功能模块中

2.在swiper文件夹中的demo中找到你要的效果 将代码拷贝过去

3.如果不懂怎么弄的 可以直接初始化一个对象

.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;}.swiper-container img {
       width: 100%;}

var swiper = new Swiper('.swiper-container', {            navigation: {                nextEl: '.swiper-button-next',                   prevEl: '.swiper-button-prev',            }, //开启左右轮播            speed: 500, //设置轮播时长 可以不设置 会有个默认值            autoplay: true,   //开启自动轮播            autoplay: {                disableOnInteraction: false,  //点击后继续轮播(这个很重要)                delay: 1000,                       //自动轮播的每次的时间 可以不设置 会有个默认值            },            loop: true,                              //开启循环轮播        });

这里有个坑就是

disableOnInteraction属性  如果不设置这个属性为false 那么用户在操作后轮播就会禁止 这个属性的默认值是true 所以要设置成false

还有个坑就是当你在做一些tab切换的时候 如果是设置的自动轮播那么切换后他也会停止 不知道什么鬼 很多人说设置这2个属性就行 我弄了半天也不行

var swiper = new Swiper('.swiper-container', {            observer:true,                                                    observeParents:true,            //就是上面这2个属性            navigation: {                nextEl: '.swiper-button-next',                prevEl: '.swiper-button-prev',            },            speed: 500,            autoplay: true,            autoplay: {                disableOnInteraction: false,                delay: 1000,            },            loop: true,        });

大家可以先尝试下 写个tab切换然后设置上面这2个属性 

我使用上面的这2个是没效果的 我的做法就是当他切换的时候我调用这个方法:

swiper.autoplay.start();

然后在切换回来的在调用这个方法:

swiper.autoplay.start();

用这2个无论你是隐藏还是切换 他都会继续跑

上面是一个很常见的PC端轮播

还有个移动端的等会再更新

以上API都是用的4.0的版本 如果是3.0的可以将我这些api和属性到官网的3.0中搜索相应的使用