swiper-抓手光标，即改变光标在swiper页面当中的样式

淩亂°似流年 2022-09-23 04:00 197阅读 0赞

本次章节呢，我们来介绍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。  
然后我们改变光标的样式为抓手光标可以看到依旧是一个属性就实现了效果，非常的方便。

发表评论取消回复

表情：

评论列表（有 0 条评论，197人围观）

还没有评论，来说两句吧...

相关阅读

相关用图片替代cursor光标样式

鼠标光标样式有限，可参考[http://css-cursor.techstream.org/][http_css-cursor.techstream.org]，自定义光标样式可

电玩女神/ 2023年06月03日 12:54/ 0 赞/ 33 阅读

相关 Swiper-页面当中添加键盘控制翻页的功能

这次内容我们介绍如何在swiper的页面当中添加键盘控制翻页的功能。开始还是搭建swiper页面。 <div class="swiper-container">

ゝ一纸荒年。/ 2022年09月23日 04:00/ 0 赞/ 258 阅读

相关 Swiper-页面当中开启循环模式

这次内容我们介绍如何在swiper页面当中开启循环模式。首先让我们用积累了十四节……不十三节的功力来搭建一个基本的swiper的布局。并且根据需要来设置CSS样式。

悠悠/ 2022年09月23日 04:00/ 0 赞/ 396 阅读

相关 swiper-抓手光标，即改变光标在swiper页面当中的样式

本次章节呢，我们来介绍swiper当中的抓手光标，即改变我们光标在swiper页面当中的样式。第一步我们还是搭建一个基础的swiper页面布局。 <b

淩亂°似流年/ 2022年09月23日 04:00/ 0 赞/ 198 阅读

相关 Swiper-当中的swiper嵌套

这节课我们介绍swiper当中的swiper嵌套。这次第一步有些不一样，虽然同样是要搭建swiper页面，但是我们在一个swiper页面当中的slide里面嵌套了

小咪咪/ 2022年09月23日 04:00/ 0 赞/ 451 阅读

相关 swiper-页面的free模式。

这节课我们介绍swiper页面的free模式。第一步，我们还是要创建一个swiper的基础页面。 <div class="swiper-containe

女爷i/ 2022年09月23日 04:00/ 0 赞/ 236 阅读

相关 Swiper-页面布置

首先我们要搭建一个基础的swiper页面。当然事先不要忘记引用下载好的框架文件。这一章我们添加了设置容器的宽、高 > > <!doctype html

ゞ浴缸里的玫瑰/ 2022年09月23日 03:59/ 0 赞/ 176 阅读

相关 Swiper-页面垂直滚动样式

首先按照第一节课的内容，将一个基本的swiper页面实现。然后在初始化的js代码当中添加属性。当然事先不要忘记引用下载好的框架文件。我们先添加翻页导航

小咪咪/ 2022年09月23日 03:59/ 0 赞/ 408 阅读

相关 Swiper页面尺寸改变时，无法实现自适应

问题：在页面全屏状态下，swiper img没有自动去铺满Dom 非全屏：img铺满了Dom ![00191cbc451f06438ff7c8a64bac0a01.png]

不念不忘少年蓝@/ 2022年08月30日 05:28/ 0 赞/ 469 阅读

相关 CSS改变input光标颜色

CSS改变input光标颜色 1. color 修改 (文字和光标同样颜色) 文字颜色 .color { color: red;

àì夳堔傛蜴生んèń/ 2022年01月29日 14:25/ 0 赞/ 350 阅读