Swiper+自动播放+抓手形状

在WEB开发中，时常会用到轮播图，今天来介绍一下swiper当中的自动播放+抓手光标（改变咱们光标在swiper页面当中的样式）。

第一步，须要引入swiper.min.css和swiper.min.js两个文件（若是没有能够到swiper中文网下载www.swiper.com.cn）

第二步，HTML部分，咱们仍是搭建一个基础的swiper页面布局。

<div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide">slide 1<img src="logo.png"></div>
                <div class="swiper-slide">slide 2<img src="logo.png"></div>
                <div class="swiper-slide">slide 3<img src="logo.png"></div>
                <div class="swiper-slide">slide 4<img src="logo.png"></div>
                <div class="swiper-slide">slide 5<img src="logo.png"></div>
                <div class="swiper-slide">slide 6<img src="logo.png"></div>
            </div>
</div>

第三步，js部分

<script>
    var swiper = new Swiper('.swiper-container', {
            pagination: '.swiper-pagination',
            paginationClickable: true,
            speed: 2000,
            loop: true,//设置为true时自动播放，默认为false
            observer:true,
            observeParents:true,
            autoplayDisableOnInteraction : false,
            grabCursor:true,  //开启抓手光标
            autoplay: {
            disableOnInteraction: false,
        }
        });
</script>

第四步，效果图