swiper的基础使用(五)
2016-06-22 00:00
218 查看
本文为H5EDU机构官方HTML5培训教程HTML5培训,swiper教程。本文主要介绍swiper框架的基本使用方法。
本节讲解如何让swiper页面分组显示。
有时候一个屏幕当中只显示一个页面并不能满足我们的开发需求,在swiper当中就包装了一个屏幕显示一组页面的方法,只需要在swiper页面的初始化当中添加一条属性即可。
第一步我们依然是编写一个基础的swiper页面。
然后在js当中进行页面的初始化并且添加属性,为了观看效果更佳。
我们在页面当中添加了slide的间隙。
当然不要忘记引用我们的框架文件,这样运行我们的页面就会发现我们的页面在当前屏幕当中会显示一组。
点击进入swiper教程:http://11731999.blog.51cto.com/11721999/1791249
本节讲解如何让swiper页面分组显示。
有时候一个屏幕当中只显示一个页面并不能满足我们的开发需求,在swiper当中就包装了一个屏幕显示一组页面的方法,只需要在swiper页面的初始化当中添加一条属性即可。
第一步我们依然是编写一个基础的swiper页面。
<div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide">第一页</div> <div class="swiper-slide">第二页</div> <div class="swiper-slide">第三页</div> <div class="swiper-slide">第四页</div> <div class="swiper-slide">第五页</div> <div class="swiper-slide">第六页</div> <div class="swiper-slide">第七页</div> <div class="swiper-slide">第八页</div> <div class="swiper-slide">第九页</div> <div class="swiper-slide">第十页</div> </div> </div>
然后在js当中进行页面的初始化并且添加属性,为了观看效果更佳。
我们在页面当中添加了slide的间隙。
<script> var swiper = new Swiper('.swiper-container',{ slidesPerView:3, //页面分组显示,这里显示为3组 spaceBetween:30 //slide间隙 }); </script>
当然不要忘记引用我们的框架文件,这样运行我们的页面就会发现我们的页面在当前屏幕当中会显示一组。
点击进入swiper教程:http://11731999.blog.51cto.com/11721999/1791249
相关文章推荐
- Details about NP-Hard and NP-Complete
- 7z命令行
- migrations 命令的错误
- FastReport.Net v2016.6发布,添加打印对话框等新功能
- Python哲学
- Python glob模块
- C3P0配置
- jxl 导出Excel
- JavaScript instanceof 的用法
- javascript总eval的用法
- Spring中bean的作用域
- 字节转为16进制输出
- SpringMVC 直接返回字符串时,中文乱码出现问号(?)的问题
- MyCat_下载配置
- BCP 数据的导入和导出
- MyCat_全局表及其死锁问题
- MyCat_分片&ER分片及其查询插入更新异常等问题
- MyCat_sequence配置
- MyCat_sql的支持举例
- MyCat_注解