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

首先引入swiper样式及css

<!-- Link Swiper's CSS -->

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

 

<!-- Swiper JS --> <script src="../dist/js/swiper.min.js"></script> 

添加DOM元素

<div class="container">

    <div class="swiper-slide">slider1</div>
    <div class="swiper-slide">slider2</div>
    <div class="swiper-slide">slider3</div>

</div>

然后设置基础样式

.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

<script> var mySwiper = new Swiper('.container', { autoplay: 2500 //自动轮播  }); </script>

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

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

详情请看SWIPER官网