swiper的基本使用(十三)

黄舟
Lepaskan: 2017-01-20 15:36:54
asal
1297 orang telah melayarinya

本次内容我们介绍在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>
Salin selepas log masuk

然后到js部分初始化函数并且绑定翻页按钮的类。

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;//绑定上一页的控制按钮
            });
Salin selepas log masuk

我们可以通过类名来改变控制按钮的颜色。并且控制按钮会随着我们的属性改变而改变为对应的样式或添加功能

以上就是swiper的基本使用(十三)的内容,更多相关内容请关注PHP中文网(m.sbmmt.com)!


Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan