swiper的基礎使用（十三）

本次內容我們介紹在swiper頁面當中添加控制按鈕（可以控制翻頁上一頁和下一頁）。

首先搭建基礎的swiper頁面佈局。然後我們主要將翻頁按鈕的div（.swiper-button-next/prev）加到外部容器(.swiper-container)當中.

 <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide">H5EDU 1<img src="logo.png"></div>
                <div class="swiper-slide">H5EDU 2<img src="logo.png"></div>
                <div class="swiper-slide">H5EDU 3<img src="logo.png"></div>
                <div class="swiper-slide">H5EDU 4<img src="logo.png"></div>
                <div class="swiper-slide">H5EDU 5<img src="logo.png"></div>
                <div class="swiper-slide">H5EDU 6<img src="logo.png"></div>
            </div>
            <div class="swiper-pagination"></div>
            <div class="swiper-button-next"></div>
            <div class="swiper-button-prev"></div>
        </div>

然後到js部分初始化函數並且綁定翻頁按鈕的類。

 var swiper = new Swiper('.swiper-container',{
                pagination:'.swiper-pagination',
                paginationClickable:true,
                spaceBetween:30,
                nextButton:'.swiper-button-next',//綁定下一頁的控制按鈕
                prevButton:'.swiper-button-prev'//綁定上一頁的控制按鈕
            });

我們可以通過類名來改變控制按鈕的顏色。並且控制按鈕會隨着我們的屬性改變而改變爲對應的樣式或添加功能