swiper的基础使用（二十）

来源：互联网发布：阿里云青岛节点编辑：程序博客网时间：2024/05/22 03:05

本次内容我们介绍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  //开启鼠标控制翻页的属性            });

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

0 0