swiper 鼠标移入停止轮播 鼠标离开 开始轮播
swiper官网找了好久,好像没有找到这种设置,干脆自己写js控制把这个是初始化swipervar swiper = new Swiper('.swiper-container', {slidesPerView: 3,spaceBetween: 1,//每个滑块距右边的距离grabCursor: true,//鼠标光标...
·
swiper官网找了好久,好像没有找到这种设置,干脆自己写js控制把
这个是初始化swiper
var swiper = new Swiper('.swiper-container', {
slidesPerView: 3,
spaceBetween: 1,//每个滑块距右边的距离
grabCursor: true,//鼠标光标
loop: true,//图片无限转动
setWrapperSize :true,//自动轮播
autoplay: 1500, //轮播的时间
pagination: {
el: '.swiper-pagination',
clickable: true
}
});
/*鼠标移入停止轮播,鼠标离开 继续轮播*/
var comtainer = document.getElementById('swiper_container');
comtainer.onmouseenter = function () {
swiper.stopAutoplay();
};
comtainer.onmouseleave = function () {
swiper.startAutoplay();
}
<!-- Swiper -->
<div class="swiper-container" id="swiper_container" style="min-width: 1000px;">
<div class="swiper-wrapper">
<div
v-loading="sliderLoading"
style="width: 100%">
</div>
<div class="swiper-slide" v-for="item in sliderArray"><img :src="item.imgUrl" alt=""></div>
</div>
<!-- 如果需要分页器 -->
<div class="swiper-pagination">
</div>
<!-- 如果需要导航按钮 -->
<!--<div class="swiper-button-prev"></div>-->
<!--<div class="swiper-button-next"></div>-->
</div>
更多推荐



所有评论(0)