swiper鼠標hover停止自動輪播

一、Swiper輪播插件簡介

Swiper是一個基於jQuery封裝的移動端輪播插件，支持自動播放、無縫輪播、觸摸拖動、滑動回彈等功能，使用起來非常方便靈活。在網頁設計中，輪播圖是一種非常常見的頁面元素，使用Swiper可以輕鬆實現這一功能。但有時候，我們希望在用戶鼠標hover的時候停止輪播，以方便用戶查看和點擊操作，這時候需要對Swiper插件進行一定的修改和定製，下面就來詳細介紹如何實現這個功能。

二、Swiper輪播插件主要設置

在使用Swiper輪播插件的時候，主要需要設置以下幾個參數：

var mySwiper = new Swiper('.swiper-container',{
    autoplay: true,//可選選項，自動滑動
    speed: 1000,//可選選項，滑動速度
    loop: true,//可選選項，開啟循環
    pagination: {//可選選項，分頁器
        el: '.swiper-pagination',
    },
    navigation: {//可選選項，前後按鈕
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
    },
});

其中autoplay為自動播放選項，默認為true，開啟自動輪播功能。如果要實現鼠標hover停止自動輪播的功能，需要在hover的時候手動停止輪播，然後在鼠標離開的時候再手動開啟輪播，具體實現方式如下。

三、實現鼠標hover停止自動輪播

首先，我們需要手動停止自動輪播，具體實現方式是通過修改輪播容器的data屬性值來實現：

$(".swiper-container").mouseenter(function(){
    $(this).attr("data-swiper-autoplay","false");
    mySwiper.autoplay.stop();
});

上述代碼就是在鼠標進入輪播容器的時候，將data-swiper-autoplay屬性值設置為false，然後調用Swiper的autoplay.stop()方法來停止輪播。接下來，我們需要在鼠標離開的時候重新開啟輪播，具體實現方式是通過修改輪播容器的data屬性值和調用Swiper的autoplay.start()方法來實現：

$(".swiper-container").mouseleave(function(){
    $(this).attr("data-swiper-autoplay","true");
    mySwiper.autoplay.start();
});

上述代碼就是在鼠標離開輪播容器的時候，將data-swiper-autoplay屬性值設置為true，然後調用Swiper的autoplay.start()方法來開啟輪播。這樣，在鼠標hover的時候就可以實現停止自動輪播的功能了。

四、完整代碼實例

下面是一個完整的Swiper鼠標hover停止自動輪播的代碼實例：

 .swiper-container{
 width: 500px;
 height: 300px;
 }
 .swiper-slide{
 text-align: center;
 font-size: 18px;
 background: #fff;
 }
 Slide 1
原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-hk/n/205868.html