swiper的基础使用（二十）

最新推荐文章于 2023-10-21 15:00:43 发布

原创最新推荐文章于 2023-10-21 15:00:43 发布 · 532 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#web前端 #html5 #框架 #移动 #swiper

swiper介绍专栏收录该内容

26 篇文章

订阅专栏

本文介绍如何在Swiper中使用鼠标滚轮控制页面上下翻页。通过设置JS配置项`mousewheelControl:true`实现该功能，使得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  //开启鼠标控制翻页的属性
            });

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