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鼠标hover停止自动轮播
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/css/swiper.min.css">
    



  
    
   
        
    Slide 1
    
        
    Slide 2
    
        
    Slide 3
    
        
    Slide 4
    
        
    Slide 5
    
    
   
    
   
    
   
    
   

  
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/js/swiper.min.js"></script>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
    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',
        },
    });
    $(".swiper-container").mouseenter(function(){
        $(this).attr("data-swiper-autoplay","false");
        mySwiper.autoplay.stop();
    });
    $(".swiper-container").mouseleave(function(){
        $(this).attr("data-swiper-autoplay","true");
        mySwiper.autoplay.start();
    });
</script>