swiper的基础使用（十一）

最新推荐文章于 2025-03-07 11:11:58 发布

花开艳丽终消散

最新推荐文章于 2025-03-07 11:11:58 发布

阅读量674

点赞数

分类专栏： swiper介绍文章标签： html5 swiper web前端框架移动

本文链接：https://blog.youkuaiyun.com/never__ends/article/details/51733767

版权

swiper介绍专栏收录该内容

26 篇文章

订阅专栏

本文介绍了如何在Swiper中设置抓手光标，以改变用户在滑动页面时的光标样式。首先，创建一个基本的Swiper布局，包括多个包含图片的滑动页面。接着，进行了简单的页面样式设计。然后，通过JavaScript初始化Swiper，设置pagination、paginationClickable、spaceBetween和slidesPerView等属性，并启用grabCursor属性以启用抓手光标。最后，通过这些设置，实现了滑动页面时光标变为抓手形状的效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本次内容，我们来介绍swiper当中的抓手光标，即改变我们光标在swiper页面当中的样式。

第一步我们还是搭建一个基础的swiper页面布局。

<body>
        <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 class="swiper-slide">H5EDU 6<img src="logo.png"></div>
            </div>
            <div class="swiper-pagination"></div>
        </div>

我们不要忘记对页面进行样式设计，因为我这里为演示，所以简单一些。

 <style>
            body{
                margin:0;
                padding:0;
                background:#eee;
            }
            .swiper-container{
                width:300px;
                height:300px;
                margin:20px auto;
            }
            .swiper-slide{
                font-size:18px;
                background:#fff;
                display:flex;
                text-align:center;
                justify-content:center;
                align-items:center;
            }
        </style>

设置外部容器的宽为100%,高为300px。

然后设置页面内容进行垂直和水平居中。

之后到js部分进行初始化。

 <script>
            var swiper = new Swiper('.swiper-container',{
                pagination:'.swiper-pagination',
                paginationClickable:true,
                spaceBetween:30,
                slidesPerView:3,
                grabCursor:true  //开启抓手光标
            });
        </script>

这里呢我们设定了页面分组显示，所以页面宽度会自动平分外部容器的宽度，页面的高度依旧为300px。

然后我们改变光标的样式为抓手光标可以看到依旧是一个属性就实现了效果，非常的方便。