swiper的基础使用(十一)
2016-06-29 09:55
399 查看
本文为H5EDU机构官方的HTML5培训教程 swiper教程。
本次章节呢,我们来介绍swiper当中的抓手光标,即改变我们光标在swiper页面当中的样式。
第一步我们还是搭建一个基础的swiper页面布局。
然后设置页面内容进行垂直和水平居中。
之后到js部分进行初始化。
然后我们改变光标的样式为抓手光标可以看到依旧是一个属性就实现了效果,非常的方便。
点击进入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强化教程
相关文章推荐
- 在Windows 8.1的IE 11中屏蔽双击放大功能
- HTML5调用摄像头实例
- Powershell 创建炫丽美观的Html报表
- Apple官网研究之使用Justify布局导航
- 关于前端的思考与感悟
- 又被事件冒泡坑了一把,这次要彻底弄懂浏览器的事件流
- 移动端点击事件全攻略,这里的坑你知多少?
- $q 实例分析 Angular 中的 Promise
- 通过Mootools 1.2来操纵HTML DOM元素
- jQuery Html控件基本操作(日常收集整理)
- WEB标准网页布局中尽量不要使用的HTML标签
- Flash 与 html 的一些实用技巧
- html工作中表格<tbody>标签的使用技巧
- HTML 向 XHTML1.0 兼容性指导
- C#自写的一个HTML解析类(类似XElement语法)
- 没有文件大小限制并免费的PDF到HTML转换工具
- JavaScript与HTML结合的基本使用方法整理
- Ruby编写HTML脚本替换小程序的实例分享