swiper教程--swiper的基础使用(二十)
2016-07-13 00:00
369 查看
本文为H5EDU机构官方的HTML5培训教程 swiper教程。
本次内容我们介绍swiper当中添加鼠标滑轮控制页面的滚动。
我们按照惯例要搭建一个基础的swiper页面并且设置CSS样式。
然后在js当中进行初始化并且添加鼠标滑轮控制翻页的属性。
这样当我们在页面当中滑动鼠标滑轮的时候就可以进行上下的翻页了
点击进入swiper强化教程:http://h5edu.cn/htm/step/h5edu_893.html
本次内容我们介绍swiper当中添加鼠标滑轮控制页面的滚动。
我们按照惯例要搭建一个基础的swiper页面并且设置CSS样式。
<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> <div class="swiper-pagination"></div> </div>
然后在js当中进行初始化并且添加鼠标滑轮控制翻页的属性。
var swiper = new Swiper('.swiper-container',{ pagination:'.swiper-pagination', paginationClickable:true, spaceBetween:30, slidesPerView:1, direction:'vertical', mousewheelControl:true //开启鼠标控制翻页的属性 });
这样当我们在页面当中滑动鼠标滑轮的时候就可以进行上下的翻页了
点击进入swiper强化教程:http://h5edu.cn/htm/step/h5edu_893.html
相关文章推荐
- 令人深思的联系-this关键字(隐藏属性static)
- JAVA学习日志(6-1-静态修饰符与主函数)
- git 小记
- java GUI 之 适配器模式
- 数组元素的全排列
- jenkins+maven+svn有关持续集成部署
- win2008 r2的Ftp搭建
- iOS多线程-NSOperation
- python使用os.system(cmd)解压缩rar文件
- java单例模式
- SqlServer常用分页方法
- LevelDB 编译安装(Debian 8)
- 梦里花落知多少………
- 怎么吃荔枝才能不上火
- 早晨空腹喝水到底对不对
- 心態決定看世界的眼光
- iOS 实现仿微信内置浏览器 LYWebViewController
- iOS 编程思想 工厂模式
- iOS 合并 UIImage
- FastReport.Net报表中使用 Excel 文件作为数据源