swiper插件的使用demo

老習慣，廢話很少說，直接上代碼

1.PC端，swiper2，滑動效果

先要引入idangerous.swiper2.7.6.css和idangerous.swiper2.7.6.js（須要先引入jquery類庫）；

(1)html文件內容：

<!-- 若是須要在圖片可視區的周圍添加一些樣式，須要在外層套上一層<div> -->
<div class="mywrapper">
     <!-- 圖片可視區 -->
<div class="swiper-container">
      <!-- 包裹圖片的父級元素 -->
      <div class="swiper-wrapper">
           <div class="swiper-slide"><img src="../img/slide1.png" alt=""></div>
           <div class="swiper-slide"><img src="../img/slide2.png" alt=""></div>
           <div class="swiper-slide"><img src="../img/slide3.png" alt=""></div>
      </div>

      <!-- 前進和後退按鈕 -->
      <div class="swiper-button-prev"></div>
      <div class="swiper-button-next"></div>
</div>
</div>

<!-- 放在外部的分頁器容器 -->
<div class="nav">
     <!-- 圖片對應的分頁器 -->
     <div class="swiper-pagination"></div>
</div>   

<!-- 文本容器 -->
<ul class="text">
    <li class="active">輕鬆查看全部交易記錄，對帳簡潔方便</li>
    <li>支持被掃支付，更快更方便，收款今後無憂</li>
    <li>被掃交易完成結果自動彈出，自動退出，減小更多操做</li>
</ul>

(2)less文件內容：

.swiper-container-wrapper {
    /* 設置圖片可視區的外層<div>的樣式 */
    width: 906px;
    height: 570px;
    margin: 50px auto;
    paddding-top: 20px;
    box-sizing: border-box;
    .bgImg('/swiper_container.png');
    .bgSize(100, 100%);
    /* 由於後面將帶有絕對定位屬性的前進和後退按鈕放在了圖片可視區的外面，因此須要給外層<div>添加相對定位 */
    position: relative;
    /* 設置圖片可視區內的樣式 */
    .swiper-container {
        /* 設置圖片可視區的寬高，由於自帶了margin: 0 auto; 因此會在外層<div>裏水平居中*/
        width: 626px;
        height: 470px;
        .swiper-wrapper {
            .swiper-slide {
                /* 不用管.swiper-wrapper和.swiper-slide，只須要設置裏面的圖片樣式 */
                img {
                    width: 626px;
                    height: 470px;
                }
            }
        }
    }
    /* 設置後退按鈕的樣式 */
    .swiper-button-prev {
        width: 40px;
        height: 80px;
        .bgImg('/swiper_prev.png');
        .bgSize(100, 100%);
        position: absolute;
        left: 0;
        top: 50%;
        margin-top: -60px;
    }
    /* 設置前進按鈕的樣式 */
    .swiper-button-next {
        width: 40px;
        height: 80px;
        .bgImg('/swiper_next.png');
        .bgSize(100, 100%);
        position: absolute;
        right: 0;
        top: 50%;
        margin-top: -60px;
    }
}
.nav {
    /* 由於分頁器自帶絕對定位屬性，因此須要給它的父級元素添加相對或者絕對定位屬性，而且給予一個固定的高度 */
    position: relative;
    height: 50px;
    .swiper-pagination {
        /* 設置分頁器的樣式，水平居中，清除浮動 */
        width: 906px;   
        padding-left: 105px;
        box-sizing: border-box;
        .clearFl;
        /* 設置每個分頁按鈕的樣式 */
        .swiper-pagination-switch {
            .fl;
            width: 100px;
            height: 30px;
            font-size: 20px;
            color: #999;
            margin-right: 100px;
            cursor: pointer;
        }
        /* 設置每個分頁按鈕被選中時的樣式 */
        .swiper-active-switch {
            color: #000;
        }
    }
}
/* 設置圖片對應的文本內容的樣式 */
.text {
    position: relative;
    height: 50px;
    li {
        width: 400px;
        position: absolute;
        left: 50%;
        margin-left: -200px;
        top: 0;
        font-size: 20px;
        opacity: 0;
        line-height: 35px;
        &.active {
            opacity: 1;
        }
    }
}

(3)js文件內容：

$(function(){
     // 實例化mySwiper對象
     var mySwiper = new Swiper ('.swiper-container',{
         initialSlide: 0 , //設置初始化時slide的索引，默認0
         autoplay: 2000, // 設置自動切換的時間間隔，默認0
         speed: 3000, // 設置滑動速度，默認爲300
         loop: true, // 是否開啓無縫輪播，默認false
         loopAdditionalSlides: 0, // 設置loop模式下在slides先後複製若干個slide，默認爲0，即先後各複製一個(0,1,2 --> 2,0,1,2,0)
         slidesPerView: 1, //設置slider容器可以同時顯示的slides數量，默認爲1，若是要選auto還需設置loopedSlides參數
         slidesPerGroup: 1, //設置上述狀況下slides的數量多少爲一組，默認爲1,
         useCSS3Transforms: false, // 不想使用css3 transforms來設定slide的位移而是使用wrapper的left/top屬性則能夠將此參數設置爲false
         DOMAnimation: true, // 在不支持css transitions(IE7-9)的瀏覽器上是否使用自定義的DOM動畫，默認爲true,
         pagination: '.swiper-pagination', //定義分頁器，默認會在這個分頁器裏面生成與slide對應的<span>標籤，要求類型是css選擇器或者HTML標籤
         paginationClickable: true, // 當值爲true時，點擊分頁器的指示點時會發生Swiper
         autoplayDisableOnInteraction: false, // 用戶操做swiper以後，是否禁止autoplay，默認爲true
         onSlideChangeStart: function(swiper){ // 觸發slider切換的回調函數，輸出的activeIndex是切換後的slide索引值
              // 同步改變每一個分頁器對應的在輪播圖以外的內容
              var idx = swiper.activeIndex - 1;
              var textArr = $('.text li',$('.figure_wrap'));
              textArr.eq(idx).addClass('active').siblings().removeClass('active');
              // 因爲每次切換的時候，類名會自動替換，最開始追加的自定義類名會消失，因此須要在這裏從新追加
              var switchArr = $('.swiper-pagination span');
              switchArr.each(function(idx,ele){
                     $(this).addClass('bullet'+idx);
              }) 
         },
         freeMode :false, // 若爲true則是自由模式，不會自動貼合滑動位置
         noSwiping: false, // 設爲true時，能夠在slide上增長類名'swiper-no-swiping'，使該slide沒法滑動
         simulateTouch: true, // 默認爲true，Swiper接受鼠標點擊、拖動。
         followFinger: false, // 如設置爲false，拖動slide時它不會動，當你釋放時slide纔會切換
     }  
 
     // 自定義分頁器裏面的文本內容，有時須要給每一個選項追加新的類名
     var switchArr = $('.swiper-pagination span');
     switchArr.eq(0).text('第一個分頁按鈕').addClass('bullet0') ;
     switchArr.eq(1).text('第二個分頁按鈕').addClass('bullet1') ;
     switchArr.eq(2).text('第三個分頁按鈕').addClass('bullet2') ;

     // 自定義前進和後退按鈕
     $('.swiper-button-prev').on('click',function(){
           mySwiper.swipePrev();
     })
     $('.swiper-button-next').on('click',function(){
           mySwiper.swipeNext();
     }) 
})

更多參數請去官網自行查詢，http://2.swiper.com.cn/api/index.html

 

2.移動端，swiper3，滑動效果

先要引入swiper-3.4.1.min.css和swiper-3.4.1.jquery.min.js（須要先引入jquery類庫）；

(1)html文件內容：

<div class="figure_wrap">
    <!-- 放在外部的分頁器容器 -->
    <div class="nav">
        <!-- 圖片對應的分頁器 -->
        <div class="swiper-pagination"></div>
    </div>   

    <!-- 圖片和對應的文本的外層容器 -->
    <div class="figure">
        <!-- 文本容器 -->
        <div class="text">
            <section class="active">
                <h3>公衆號收銀臺</h3>
                <p>潤聯網絡在微信中創建了公衆號收銀臺，同時支持支付寶和微信收款，收銀臺不只擁有完善的店員等級管理系統，同時還能用於POS收銀機商戶。</p>
                <div class="wrap"><a href="subscription.html">瞭解更多 ></a></div>
            </section>

            <section>
                <h3>POS收銀機</h3>
                <p>潤聯POS終端收銀機，不只支持普通的刷卡業務，同時能使用訂單支付，而且綁定手機公衆號後，能使用公衆號的功能，也能綁定多個收銀員收款。</p>
                <div class="wrap"><a href="pos.html">瞭解更多 ></a></div>
            </section>           

            <section>
                <h3>收銀寶軟件</h3>
                <p>潤聯收銀寶是在WINDOWS系統上開發的，用於收銀機上的收款軟件，具備打印公衆號收銀小票和利用掃碼槍反掃收款等功能。</p>
                <div class="wrap"><a href="cashbaby.html">瞭解更多 ></a></div>
            </section>                                           
        </div>

        <!-- 圖片容器，也叫圖片的可視區 -->        
        <div class="swiper-container">
            <!-- 包裹圖片的父級元素 -->
            <div class="swiper-wrapper">
                <div class="swiper-slide"><img src="img/slide1.png" alt=""></div>
                <div class="swiper-slide"><img src="img/silde2.png" alt=""></div>
                <div class="swiper-slide"><img src="img/silde3.png" alt=""></div>
            </div>
        </div>                   
    </div>           
</div>

(2)less文件內容：

.figure_wrap{
    .nav{
        /* 由於分頁器自帶絕對定位屬性，因此須要給它的父級元素添加相對或者絕對定位屬性，而且給予一個固定的高度 */  
        position: relative;
        height: 2.65rem;
        padding: 0.7rem 0.4rem 0.4rem;
        box-sizing: border-box;
        .swiper-pagination{
            /* 由於分頁器自帶絕對定位屬性，若是須要依據父級元素來肯定寬度，就要設置寬度百分比或者css3的計算函數 */
            width: calc(~'100% - 0.8rem');
            /* 添加彈性盒，子元素就會自動歸爲一行而且不會產生多餘的空隙 */
            display: block;
            .swiper-pagination-bullet{
                /* 由於每個分頁按鈕自帶了固定的寬高，因此須要按照本身的需求進行手動修改 */
                width: auto;
                height: 1.55rem;
                /* 橫向均分父元素的寬度 */
                flex: 1;
                /* 由於每個分頁按鈕自帶了圓角、透明度、背景顏色以及手勢樣式，因此須要按照本身的需求進行手動修改 */
                border-radius: 0;
                opacity: 1;
                cursor: auto;
                /* 添加其餘公共樣式 */
                font-size: 0.28rem;
                color: #999;
                display: flex;
                justify-content: center;
                align-items: flex-end;/* 對每個分頁按鈕添加私有樣式 */
                &.bullet1{
                    .bgImg('/product_page1.png',center);
                    .bgSize(0.52rem);
                }
                &.bullet2{
                    .bgImg('/product_page2.png',center);
                    .bgSize(1.05rem);
                }
                &.bullet3{
                    .bgImg('/product_page3.png',center);
                    .bgSize(1rem);
                }
                /* 修改和添加被選中的分頁按鈕的樣式 */                                                
                &.swiper-pagination-bullet-active{
                    color: @color_blue;
                    &.bullet1{
                        .bgImg('/product_page1_active.png',center);
                        .bgSize(0.52rem);
                    }
                    &.bullet2{
                        .bgImg('/product_page2_active.png',center);
                        .bgSize(1.05rem);
                    }
                    &.bullet3{
                        .bgImg('/product_page3_active.png',center);
                        .bgSize(1rem);
                    }                               
                }
            }
        }
    }
    .figure{
        padding: 0.55rem 0.4rem 0.85rem;
        /* 設置圖片對應的文本內容的樣式 */
        .text{
            height: 3.5rem;
            position: relative;
            section{
                position: absolute;
                left: 0;
                top: 0;
                display: none;
                &.active{
                    display: block;
                }
                h3{
                    font-size: 0.36rem;                 
                }
                p{
                    font-size: 0.28rem;
                    line-height: 0.5rem;
                    margin: 0.35rem 0 0.4rem;
                }
                .wrap{
                    a{
                        display: block;
                        font-size: 0.28rem;
                        color: @color_blue;                               
                    }
                }
            }
        }
        /* 修改和添加圖片區域的樣式 */
        .swiper-container{
            /* 給定可視區容器的寬高 */
            width: 5.5rem;
            height: 4rem;
            margin: 0 auto;
            .swiper-wrapper{
                .swiper-slide{
                    /* 由於.swiper-wrapper和.swiper-slide的寬度都是默認100%，因此都是和可視區的寬高相匹配，只須要設置裏面的圖片樣式 */
                    display: flex;

                    justify-content: center;
                    align-items: center;
                    img{
                        &:nth-child(1){
                            width: 4.42rem;
                        }
                        &:nth-child(2){
                            width: 5.42rem;
                        }
                        &:nth-child(3){
                            width: 5.23rem;
                        }                                                               
                    }
                }
            }
        }
    }
}

(3)js文件內容：

$(function(){
    // 實例化swiper
    var mySwiper = new Swiper('.swiper-container',{
        effect: 'slide', // 設置slide的切換效果，默認爲slide
        autoplay: 0, // 設置自動切換的時間間隔，默認爲0，不設定該參數或者設爲0，slide不會自動切換
        speed: 1000, // 設置切換效果所須要花費的時間，默認爲300
        loop: true, // 是否無縫循環，默認爲false
        loopAdditionalSlides: 0, // loop模式下會在slides先後複製若干個slide，默認爲0，即先後各複製1個
        pagination: '.swiper-pagination', // 設置分頁器容器的css選擇器或HTML標籤
        paginationType: 'bullets', // 設置分頁器樣式類型，默認爲'bullets'即圓點
        paginationClickable: true, // 是否能夠點擊分頁器來控制切換，默認爲false
        autoplayDisableOnInteraction: false, // 用戶操做swiper以後，是否禁止autoplay，默認爲true
        paginationHide: false, // 點擊swiper是否會隱藏分頁器，默認爲false
        paginationElement: 'li', // 設定分頁器指示器的HTML標籤，默認爲'span'，若是是自定義渲染，此項設置無效
        paginationBulletRender: function (swiper,index, className) { // 自定義當樣式爲'bullets'時分頁器的內容，接受當前頁的索引值和類名做爲參數
              // console.log(arguments);
              var className2;
              var text;
              switch(index){
                  case 0:
                  className2 = 'bullet1';
                  text = '這是第一個分頁按鈕';
                  break;
                  case 1:
                  className2 = 'bullet2';
                  text = '這是第二個分頁按鈕 ';
                  break;
                  case 2:
                  className2 = 'bullet3';
                  text = '這是第三個分頁按鈕 ';
                  break;
              }
              return '<div class="' + className + ' ' + className2 + '">' + text +'</div>'; // 實際顯示多個具備某個相同類名的通用標籤，不一樣的是各自另外帶上的類名和標籤的文本內容
          },
         // paginationCustomRender: function (swiper,current, total) { // 自定義當樣式爲'custom'時分頁器的內容，接受當前頁數和總數做爲參數
              // return '<span class="' + current + '">' + current +'of' + total +'</span>'; // 實際顯示一個通用的標籤，改變的只是該標籤的文本內容
          // },
          uniqueNavElements: false, // 默認爲true，表示僅本swiper的container內的分頁器有效，設置爲false後，container之外的分頁器也生效了
          prevButton: '.swiper-button-prev', // 設置前進按鈕的css選擇器或HTML元素
          nextButton: '.swiper-button-next', // 設置後退按鈕的css選擇器或HTML元素
          preventClicks: true ,// 是否在swiper發生觸摸時阻止默認事件（preventDefault），默認爲true
          onSlideChangeStart: function(swiper){ // 觸發slider切換的回調函數，輸出的activeIndex是切換後的slide索引值
            // 同步改變每一個分頁器對應的在輪播圖以外的內容
            var idx = swiper.activeIndex - 1;
            var textArr = $('.text section',$('.figure'));
            $(textArr[idx]).addClass('active').siblings().removeClass('active');
        }
    });
})

更多參數請去官網自行查詢，http://www.swiper.com.cn/

 

3.移動端，swiper3，漸隱漸現效果

先要引入swiper-3.4.1.min.css和swiper-3.4.1.jquery.min.js（須要先引入jquery類庫）；

(1)html文件內容：

<!-- 若是須要在圖片可視區的周圍添加一些樣式，須要在外層套上一層<div> -->
<div class="swiper-container-wrapper">
    <!-- 圖片可視區 -->
    <div class="swiper-container">
        <!-- 包裹圖片的父級元素 -->
        <div class="swiper-wrapper">
            <div class="swiper-slide"><img src="img/slide1.png" alt=""></div>
            <div class="swiper-slide"><img src="img/slide2.png" alt=""></div>
            <div class="swiper-slide"><img src="img/slide3.png" alt=""></div>
        </div>
    </div>       

    <!-- 前進和後退按鈕 -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>                       
</div>

<!-- 放在外部的分頁器容器 -->
<div class="nav">
    <!-- 圖片對應的分頁器 -->
    <div class="swiper-pagination"></div>
</div>   

<!-- 文本容器 -->
<ul class="text">
    <li class="active">這是第一個分頁對應的文本</li>
    <li>這是第二個分頁對應的文本</li>
    <li>這是第三個分頁對應的文本</li>
</ul>

(2)less文件內容：

.swiper-container-wrapper{
    /* 設置圖片可視區的外層<div>的樣式 */
    height: 4.2rem;
    .bgImg('/swiper_container.png');
    .bgSize;
    /* 由於子元素設置了margin-top，爲了防止父元素下沉，因此要加上overflow:hidden; */
    overflow: hidden;       
    /* 設置圖片可視區內的樣式 */
    .swiper-container{
        /* 設置圖片可視區的寬高，由於自帶了margin: 0 auto; 因此會在外層<div>裏水平居中*/
        width: 4.5rem;
        height: 3.45rem;
        margin-top: 0.15rem;
        .swiper-wrapper{
            .swiper-slide{
                /* 不用管.swiper-wrapper和.swiper-slide，只須要設置裏面的圖片樣式 */
                img{
                    width: 4.7rem;
                    height: 3.54rem;
                }
            }
        }
    }
    /* 隱藏前進和後退按鈕 */
    .swiper-button-prev,.swiper-button-next{
        display: none;
    }
}
.nav{
    /* 由於分頁器自帶絕對定位屬性，因此須要給它的父級元素添加相對或者絕對定位屬性，而且給予一個固定的高度 */
    position: relative;
    height: 1rem;
    line-height: 1rem;
    .swiper-pagination{
        /* 由於分頁器自帶絕對定位屬性，若是須要依據父級元素來肯定寬度，就要設置寬度百分比或者css3的計算函數 */
        width: 100%;
        /* 添加彈性盒，子元素就會自動歸爲一行而且不會產生多餘的空隙 */
        display: flex;
        .swiper-pagination-bullet{
            /* 由於每個分頁按鈕自帶了固定的寬高，因此須要按照本身的需求進行手動修改 */
            width: auto;
            height: auto;
            /* 橫向均分父元素的寬度 */
            flex: 1;
            /* 由於每個分頁按鈕自帶了圓角、透明度、背景顏色以及手勢樣式，因此須要按照本身的需求進行手動修改 */
            border-radius: 0;
            opacity: 1;
            cursor: auto;
            background-color: transparent;
            /* 添加其餘公共樣式 */
            font-size: 0.2rem;
            color: #999;
            /* 修改和添加被選中的分頁按鈕的樣式 */     
            &.swiper-pagination-bullet-active{
                color: #000;
            }
        }
    }
}       
/* 設置圖片對應的文本內容的樣式 */
.text{
    position: relative;
    height: 1rem;
    line-height: 1rem;
    li{
        width: 100%;
       font-size: 0.28rem;
        opacity: 0;
        position: absolute;
        left: 0;
        top: 0;
        transition: opacity 0.5s;
        &.active{
            opacity: 1;
            transition: opacity 0.5s;
        }
    }
}

(3)js文件內容：

$(function(){
    var mySwiper = new Swiper('.swiper-container',{
        effect: 'fade', // 設置slide的切換效果，默認爲slide
        fade: false, // 設置fade的效果參數，默認爲false，表示關閉淡出，即過渡中的slide透明度從0->1（淡入），其餘slide透明度變爲0
        autoplay: 2000, // 設置自動切換的時間間隔，默認爲0，不設定該參數或者設爲0，slide不會自動切換
        speed: 1000, // 設置切換效果所須要花費的時間，默認爲300
        loop: true, // 是否無縫循環，默認爲false
        loopAdditionalSlides: 0, // loop模式下會在slides先後複製若干個slide，默認爲0，即先後各複製1個
        pagination: '.swiper-pagination', // 設置分頁器容器的css選擇器或HTML標籤
        paginationType: 'bullets', // 設置分頁器樣式類型，默認爲'bullets'即圓點
        paginationClickable: true, // 是否能夠點擊分頁器 來控制切換，默認爲false
        autoplayDisableOnInteraction: false, // 用戶操做swiper以後，是否禁止autoplay，默認爲true
        paginationHide: false, // 點擊swiper是否會隱藏分頁器 ，默認爲false
        paginationElement: 'li', // 設定分頁器指示器的HTML標籤，默認爲'span'，若是是自定義渲染，此項設置無效
        paginationBulletRender: function (swiper,index, className) { // 自定義當樣式爲'bullets'時分頁器的內容，接受當前頁的索引值和類名做爲參數
              // console.log(arguments);
              var text;
              switch(index){
                  case 0:
                       text = '這是第一個分頁按鈕';
                       break;
                  case 1:
                       text = '這是第二個分頁按鈕 ';
                       break;
                  case 2:
                       text = '這是第三個分頁按鈕 ';
                       break;
              }
              return '<div class="' + className + '">' + text +'</div>'; // 實際顯示多個類名相同的通用標籤，不一樣的是各自的文本內容
          },
        // paginationCustomRender: function (swiper,current, total) { // 自定義當樣式爲'custom'時分頁器的內容，接受當前頁數和總數做爲參數
            // return '<span class="' + current + '">' + current +'of' + total +'</span>'; // 實際顯示一個通用的標籤，改變的只是該標籤的文本內容
        // },
        uniqueNavElements: true, // 默認爲true，表示僅本swiper的container內的分頁器有效，設置爲false後，container之外的分頁器也生效了
        prevButton: '.swiper-button-prev', // 設置前進按鈕的css選擇器或HTML元素
        nextButton: '.swiper-button-next', // 設置後退按鈕的css選擇器或HTML元素
        preventClicks: true ,// 是否在swiper發生觸摸時阻止默認事件（preventDefault），默認爲true
        onSlideChangeStart: function(swiper){ // 觸發slider切換的回調函數，輸出的activeIndex是切換後的slide索引值
            // 同步改變每一個分頁器對應的在輪播圖以外的內容
            var idx = swiper.activeIndex - 1;
            var textArr = $('.text li',$('.figure_wrap'));
            $(textArr[idx]).addClass('active').siblings().removeClass('active');
        }
    })
})

更多參數請去官網自行查詢，http://www.swiper.com.cn/