码迷,mamicode.com
首页 > 其他好文 > 详细

swiper教程--swiper的基础使用(二十)

时间:2016-07-12 15:24:57      阅读:222      评论:0      收藏:0      [点我收藏+]

标签:

本文为H5EDU机构官方的HTML5培训教程 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强化教程:http://h5edu.cn/htm/step/h5edu_893.html

swiper教程--swiper的基础使用(二十)

标签:

原文地址:http://www.cnblogs.com/zhanyingwang/p/5663435.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!