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

swiper的基础使用（十一）

2016-06-30 00:00 363 查看

本文为H5EDU机构官方的HTML5培训教程 swiper教程。
本次章节呢，我们来介绍swiper当中的抓手光标，即改变我们光标在swiper页面当中的样式。

第一步我们还是搭建一个基础的swiper页面布局。

<body>
<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>

我们不要忘记对页面进行样式设计，因为我这里为演示，所以简单一些。

<style>
body{
margin:0;
padding:0;
background:#eee;
}
.swiper-container{
width:300px;
height:300px;
margin:20px auto;
}
.swiper-slide{
font-size:18px;
background:#fff;
display:flex;
text-align:center;
justify-content:center;
align-items:center;
}
</style>

设置外部容器的宽为100%,高为300px。
然后设置页面内容进行垂直和水平居中。
之后到js部分进行初始化。

<script>
var swiper = new Swiper('.swiper-container',{
pagination:'.swiper-pagination',
paginationClickable:true,
spaceBetween:30,
slidesPerView:3,
grabCursor:true  //开启抓手光标
});
</script>

这里呢我们设定了页面分组显示，所以页面宽度会自动平分外部容器的宽度，页面的高度依旧为300px。
然后我们改变光标的样式为抓手光标可以看到依旧是一个属性就实现了效果，非常的方便。

点击进入swiper强化教程：http://www.h5edu.cn/index.php?c=index&a=step&lessonid=893

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： HTML5 swiper

相关文章推荐

新的分享

章节导航