swiper教程--swiper的基础使用(二十)
2016-07-12 14:36
483 查看
本文为H5EDU机构官方的HTML5培训教程 swiper教程。
本次内容我们介绍swiper当中添加鼠标滑轮控制页面的滚动。
我们按照惯例要搭建一个基础的swiper页面并且设置CSS样式。
点击进入swiper强化教程
本次内容我们介绍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强化教程
相关文章推荐
- 在Windows 8.1的IE 11中屏蔽双击放大功能
- HTML5调用摄像头实例
- Powershell 创建炫丽美观的Html报表
- Apple官网研究之使用Justify布局导航
- 关于前端的思考与感悟
- 又被事件冒泡坑了一把,这次要彻底弄懂浏览器的事件流
- 移动端点击事件全攻略,这里的坑你知多少?
- $q 实例分析 Angular 中的 Promise
- Angular directive 实例详解
- 关于浮动与清除浮动,你应该知道的
- 通过Mootools 1.2来操纵HTML DOM元素
- jQuery Html控件基本操作(日常收集整理)
- WEB标准网页布局中尽量不要使用的HTML标签
- Flash 与 html 的一些实用技巧
- html工作中表格<tbody>标签的使用技巧
- HTML 向 XHTML1.0 兼容性指导
- C#自写的一个HTML解析类(类似XElement语法)
- 没有文件大小限制并免费的PDF到HTML转换工具