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

swiper插件的一些坑

猜你喜欢