swiper教程——swiper的基础使用(十九)
2016-07-12 00:00
190 查看
本文为H5EDU机构官方的HTML5培训HTML5培训教程 swiper教程。
这次内容我们介绍如何在swiper的页面当中添加键盘控制翻页的功能。
开始还是搭建swiper页面。
然后在js当中进行初始化并且设定CSS样式。
如上我们只是在初始化当中添加了
keyboardControl:true就可以让swiper页面有键盘控制翻页的效果。如果不添加是不可以用键盘控制页面滚动的
点击进入swiper强化教程:http://h5edu.cn/htm/step/h5edu_893.html
这次内容我们介绍如何在swiper的页面当中添加键盘控制翻页的功能。
开始还是搭建swiper页面。
<div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide">H5EDU1</div> <div class="swiper-slide">H5EDU2</div> <div class="swiper-slide">H5EDU3</div> <div class="swiper-slide">H5EDU4</div> <div class="swiper-slide">H5EDU5</div> </div> <div class="swiper-pagination"></div> <div class="swiper-button-next"></div> <div class="swiper-button-prev"></div> </div>
然后在js当中进行初始化并且设定CSS样式。
var swiper = new Swiper('.swiper-container',{ pagination:'.swiper-pagination', slidesPerView:1, paginationClickable:true, spaceBetween:30, nextButton:'.swiper-button-next', prevButton:'.swiper-button-prev', keyboardControl:true //开启键盘控制翻页 });
如上我们只是在初始化当中添加了
keyboardControl:true就可以让swiper页面有键盘控制翻页的效果。如果不添加是不可以用键盘控制页面滚动的
点击进入swiper强化教程:http://h5edu.cn/htm/step/h5edu_893.html
相关文章推荐
- Struts2、SpringMVC、Servlet(Jsp)性能对比 测试 。 Servlet的性能应该是最好的,可以做为参考基准,其它测试都要向它看齐,参照
- java并发特性,原子性、有序性、可见性
- hibernate防止sql注入
- java23种设计模式
- FindBugs java静态代码分析
- Key锁
- FindBugs java静态代码分析
- lunix问题笔记
- sturts2 标签
- ORACLE CLOSE BY CLIENT STACK TRACE
- PoI导出数据
- AES加密在linux下不能正常使用
- JVM学习笔记
- log4j输出多个自定义日志文件
- jvm常用命令以及问题总结
- JDK并发编程2
- 使用pax.exam对osgi(基于maven)进行集成测试
- FindBugs java静态代码分析
- 页面前端框架记录
- jvm参数设置