Basic use of swiper (13)-JS Tutorial-php.cn

Basic use of swiper (13)

黄舟

Release： 2017-01-20 15:36:54

Original

1296 people have browsed it

In this content, we introduce adding control buttons to the swiper page (which can control turning to the previous page and next page).

First build the basic swiper page layout. Then we mainly add the div of the page turning button (.swiper-button-next/prev) to the external container (.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>

Copy after login

Then go to the js part to initialize the function and bind the page turning button the type.

var swiper = new Swiper(&#39;.swiper-container&#39;,{
                pagination:&#39;.swiper-pagination&#39;,
                paginationClickable:true,
                spaceBetween:30,
                nextButton:&#39;.swiper-button-next&#39;,//绑定下一页的控制按钮
                prevButton:&#39;.swiper-button-prev&#39;//绑定上一页的控制按钮
            });

Copy after login

We can change the color of the control button through the class name. And the control buttons will change to the corresponding style or add functions as our attributes change

The above is the content of the basic use of swiper (13). For more related content, please pay attention to the PHP Chinese website (m.sbmmt.com)!