首先引入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官网