今天在做项目的时候,遇到了这个问题,于是写个博客记录下来,方便后续进行参考
swiper是我们常用的轮播图组件 ,功能强大无须赘言
下面直接贴上代码,亲测有效
<!-- Swiper -->
<div class="swiper-container" >
<div class="swiper-wrapper flex">
<div class="swiper-slide">
<img class="" src="__home__/static/picture/index_banner1.png">
</div>
<div class="swiper-slide">
<img class="" src="__home__/static/picture/index_banner2.jpg">
</div>
<div class="swiper-slide">
<img class="" src="__home__/static/picture/d_banner.png" style="height:630px;">
</div>
</div>
</div>
js代码如下
var swiper = new Swiper('.swiper-container', {
spaceBetween: 30, //slide之间的距离
centeredSlides: true, //若为真,那么活动块会居中,而非默认状态下的居左
mousewheel: false,
grabCursor: true,
autoplay: { //自动切换
delay: 1000,
disableOnInteraction: false
}
});
$('.swiper-container').hover(function(){
swiper.autoplay.stop();
},function(){
swiper.autoplay.start();
});
这个方法是我从网上众多教程中实验亲测有效的一个,小伙伴们快试试吧。