Swiper使用方法（向前和向後按鈕在swiper-container外面）

Swiper插件的使用

一、HTML

<!-- Swiper -->
<section class="swipper">
 <div class="swiper-button-next"></div>
    <div class="nav-swipper swiper-container  swiper-container-horizontal">
        <div class="swiper-wrapper">
            <div class="swiper-slide"><span class="now"><b><img src="images/swiper-1.png" height="25" width="auto" alt=""></b>股票</span></div>
            <div class="swiper-slide"><span><b><img src="images/swiper-2.png" height="25" width="auto" alt=""></b>債券</span></div>
            <div class="swiper-slide"><span><b><img src="images/swiper-3.png" height="25" width="auto" alt=""></b>公益</span></div>
            <div class="swiper-slide"><span><b><img src="images/swiper-4.png" height="25" width="auto" alt=""></b>實物</span></div>
            <div class="swiper-slide"><span><b>你猜</b>測試</span></div>
            <div class="swiper-slide"><span><b>再猜</b>測試</span></div>
        </div>
        <!-- Add Pagination -->
        <!-- <div class="swiper-pagination"></div> -->
    </div>
    <div class="swiper-button-prev"></div>
    <!-- Swiper End-->
</section>

 

 二、CSS

.nav-swipper{background: #F2F2F2;height: 78px;box-sizing: border-box;}
/*.nav-swipper .swiper-wrapper{margin: 0px 24px;}*/
.nav-swipper .swiper-slide {margin: 0px;text-align: center; font-size: 13px;color: #999; background: #F2F2F2; 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; }
section.swipper {border-top: 1px solid #979797;padding: 0px 24px;position: relative;}
section.swipper .swiper-button-prev{top:50%;background-image:url(../images/swiper-pre.png);background-size: 12px auto;left: 10px;right: auto;width: 12px;height: 19px;}
section.swipper .swiper-button-next{top:50%;background-image:url(../images/swiper-next.png);background-size: 12px auto;left: auto;right: 10px;width: 12px;height: 19px;}
.nav-swipper span { display: inline-block; vertical-align: top;height: 64px; }
.nav-swipper b { height: 42px; display: table-cell; vertical-align: middle; width: 42px; text-align: center; background: #F7F7F7; border-radius: 50%; border: #fff 1px solid; color: #ccc; box-shadow: 0px 1px 3px #999; }
.nav-swipper span.now b{border-color: #FF6602;}

 

三、JS

var swiper = new Swiper('.nav-swipper', {
        pagination: '.swiper-pagination',
        slidesPerView: 4,
        paginationClickable: true,
        spaceBetween: 0,
        nextButton: '.swiper-button-next',
        prevButton: '.swiper-button-prev',
    });

 

 「swiper-button-next」和「swiper-button-prev」兩個button是能夠脫離在「swiper-container」外面的。由於「swiper-container」的Margin-left起做用，可是Margin-right不起做用（設置了over-flow:hidden），因此沒有辦法設置「swiper-container」的外邊距。可是能夠在「swiper-container」外面加一個容器，而後設置它的padding，再把「向左、向右的按鈕」放在padding的間距裏面。padding  要使用px，rem有時候不起做用。

 

swiper使用的通常方法如連接所示：http://www.swiper.com.cn/usage/index.html