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="/static/imghwm/default1.png"  data-src="logo.png"  class="lazy"   alt="swiper的基本使用（十三）" ></div>
                <div class="swiper-slide">H5EDU 2<img  src="/static/imghwm/default1.png"  data-src="logo.png"  class="lazy"   alt="swiper的基本使用（十三）" ></div>
                <div class="swiper-slide">H5EDU 3<img  src="/static/imghwm/default1.png"  data-src="logo.png"  class="lazy"   alt="swiper的基本使用（十三）" ></div>
                <div class="swiper-slide">H5EDU 4<img  src="/static/imghwm/default1.png"  data-src="logo.png"  class="lazy"   alt="swiper的基本使用（十三）" ></div>
                <div class="swiper-slide">H5EDU 5<img  src="/static/imghwm/default1.png"  data-src="logo.png"  class="lazy"   alt="swiper的基本使用（十三）" ></div>
                <div class="swiper-slide">H5EDU 6<img  src="/static/imghwm/default1.png"  data-src="logo.png"  class="lazy"   alt="swiper的基本使用（十三）" ></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'//绑定上一页的控制按钮
            });

我們可以透過類別名稱來改變控制按鈕的顏色。而控制按鈕會隨著我們的屬性改變而改變為對應的樣式或添加功能

以上就是swiper的基本使用（十三）的內容，更多相關內容請關注PHP中文網（www.php.cn ）！