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