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>

第四步，效果圖