swiper插件的一些坑

最近正在做一个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.如果不懂怎么弄的 可以直接初始化一个对象

 <div class="swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide swiper-no-swiping">
                        <img src="" />
                    </div>
                    <div class="swiper-slide swiper-no-swiping">
                        <img src="" />
                    </div>
                    <div class="swiper-slide swiper-no-swiping">
                        <img src="" />
                    </div>
                    <div class="swiper-slide swiper-no-swiping">
                        <img src="" />
                    </div>
                    <div class="swiper-slide swiper-no-swiping">
                        <img src="" />
                    </div>
                    <div class="swiper-slide swiper-no-swiping">
                        <img src="" />
                    </div>
                </div>
                <!-- Add Arrows -->
                <!-- <div class="swiper-button-next"></div>
                <div class="swiper-button-prev"></div> -->
            </div>

.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中搜索相应的使用