swiper应用demo及鼠标滑过悬停离开滚动方法

首先引入swiper样式及css

< link rel= "stylesheet" href= "../dist/css/swiper.min.css" >

 

添加DOM元素

    
slider1
    
slider2
    
slider3

然后设置基础样式

.container {
    width: 500px;
    height: 300px;
    margin: 20px auto;
}
.swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;
   
    /* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}

最后初始化一下swiper

鼠标悬停及鼠标离开开启轮播

$(".container").mouseenter(function () {//滑过悬停
    mySwiper.stopAutoplay();//mySwiper 为上面你swiper实例化的名称
}).mouseleave(function(){//离开开启
    mySwiper.startAutoplay();
});

详情请看SWIPER官网