swiper的基础使用（十一）-html教程-PHP中文网

swiper的基础使用（十一）

黄舟

发布： 2017-01-20 15:30:06

原创

1654人浏览过

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