swiper教程--swiper的基础使用（二十）

标签：html5 swiper

本文为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强化教程

本文出自 “11721999” 博客，请务必保留此出处http://11731999.blog.51cto.com/11721999/1825723

swiper教程--swiper的基础使用（二十）

标签：html5 swiper

原文地址：http://11731999.blog.51cto.com/11721999/1825723