swiper教程--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強化教程：http://h5edu.cn/htm/step/h5edu_893.html