您的位置：首页 > Web前端 > HTML5

swiper的基础使用（十三）

2016-06-24 14:34 489 查看
本次内容我们介绍在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'//绑定上一页的控制按钮
});

我们可以通过类名来改变控制按钮的颜色。并且控制按钮会随着我们的属性改变而改变为对应的样式或添加功能
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  html5 swiper web前端 框架 移动
相关文章推荐
新的分享
章节导航