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

最新推荐文章于 2022-08-17 19:01:23 发布

weixin_33717117

最新推荐文章于 2022-08-17 19:01:23 发布

阅读量76

点赞数

文章标签： python

原文链接：https://my.oschina.net/zhanyingwang/blog/711599

版权

2019独角兽企业重金招聘Python工程师标准>>>

本文为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  //开启鼠标控制翻页的属性  
          });

这样当我们在页面当中滑动鼠标滑轮的时候就可以进行上下的翻页了

点击进入JS强化教程：http://h5edu.cn/htm/step/h5edu_893.html

转载于:https://my.oschina.net/zhanyingwang/blog/711599