swiper3 无缝滚动 + 鼠标悬停停止/继续

鼠标悬停停止/继续"/>

swiper3 无缝滚动 + 鼠标悬停停止/继续

html结构：

<div class="peopleSwiper"><div class="swiper-container"><div class="swiper-wrapper"><div class="swiper-slide"><img src="images/people01.png"></div><div class="swiper-slide"><img src="images/people02.png"></div><div class="swiper-slide"><img src="images/people03.png"></div><div class="swiper-slide"><img src="images/people04.png"></div><div class="swiper-slide"><img src="images/people01.png"></div><div class="swiper-slide"><img src="images/people02.png"></div><div class="swiper-slide"><img src="images/people03.png"></div><div class="swiper-slide"><img src="images/people04.png"></div><div class="swiper-slide"><img src="images/people01.png"></div><div class="swiper-slide"><img src="images/people02.png"></div><div class="swiper-slide"><img src="images/people03.png"></div><div class="swiper-slide"><img src="images/people04.png"></div></div></div>
</div>

无缝滚动（修改css和autoplay属性）

.swiper-container-free-mode > .swiper-wrapper{transition-timing-function:linear;}

//初始化一个Swiper为peopleSwiper
var peopleSwiper = new Swiper('.peopleSwiper .swiper-container', {slidesPerView: 8,paginationClickable: true,spaceBetween: 5,autoplay: true, //autoplay设置为true或者1speed: 1000,disableOnInteraction: true,loop:true,freeMode: true
});

鼠标悬停控制

mySwiper.stopAutoplay() 和 mySwiper.startAutoplay()是控制autoplay属性，无缝滚动是speed属性，mySwiper.stopAutoplay() 和 mySwiper.startAutoplay()可以实现鼠标悬停暂停和继续的效果，但是需swiper执行完speed规定值后再执行暂停，如果需要鼠标悬停立刻暂停，移开后继续需调整mySwiper.stopAutoplay() 和 mySwiper.startAutoplay()控制

swiper3 官方

//鼠标覆盖停止自动切换
mySwiper.container[0].onmouseover=function(){mySwiper.stopAutoplay();
}
//鼠标移出开始自动切换
mySwiper.container[0].onmouseout=function(){mySwiper.startAutoplay();
}/*
或者
mouseenter / mouseleave 和 hover
".peopleSwiper"为html外层类名 peopleSwiper为初始化swiper名
*/
$('.peopleSwiper').mouseenter(function() {peopleSwiper.stopAutoplay();
}).mouseleave(function() {peopleSwiper.startAutoplay();
})$('.peopleSwiper').hover(function() {peopleSwiper.stopAutoplay();
},function(){peopleSwiper.startAutoplay();
})

mouseenter / mouseleave 或者 hover

let speedNum = 3000 //swiper滑动速度
let slideViewNum = 8 //swiper容器能够同时显示的slides数量
let slideWidth = $(window).width()*0.9/slideViewNum //每个swiper-slide宽度 0.9是外层容器的宽度是屏幕90%
let transformSlide = "" //鼠标悬停时的transform属性
let moveTime = 0 //轮播图从暂停位置移动到原本应到的位置用时//初始化swiper
var peopleSwiper = new Swiper('.peopleSwiper .swiper-container', {slidesPerView: slideViewNum,paginationClickable: true,spaceBetween: 5,autoplay: true,speed: speedNum,disableOnInteraction: true,loop:true,freeMode: true
});//鼠标悬停停止离开继续
$('.peopleSwiper').hover(function(){transformSlide = document.getElementsByClassName("swiper-container")[0].getElementsByClassName("swiper-wrapper")[0].style.transform;//轮播图原本应移动到的位置let oldPosition = -1 *parseInt(document.getElementsByClassName("swiper-container")[0].getElementsByClassName("swiper-wrapper")[0].style.transform.split("translate3d(")[1].split("px")[0]);//鼠标悬停时时轮播图位置let newPosition = -1 *parseInt(window.getComputedStyle(document.getElementsByClassName("swiper-container")[0].getElementsByClassName("swiper-wrapper")[0],false)["transform"].split("1, ")[2].split(",")[0]);//鼠标悬停时轮播图的真实transform属性let nowTarnsform = window.getComputedStyle(document.getElementsByClassName("swiper-container")[0].getElementsByClassName("swiper-wrapper")[0],false)["transform"];//修改轮播图从暂停位置移动到原本应到的位置用时moveTime = speedNum * ((oldPosition - newPosition) / slideWidth);//改变transform属性document.getElementsByClassName("swiper-container")[0].getElementsByClassName("swiper-wrapper")[0].style.transform = nowTarnsform;peopleSwiper.stopAutoplay();
},function(){document.getElementsByClassName("swiper-container")[0].getElementsByClassName("swiper-wrapper")[0].style.transform = transformSlide;document.getElementsByClassName("swiper-container")[0].getElementsByClassName("swiper-wrapper")[0].style.transitionDuration = moveTime+"ms";peopleSwiper.startAutoplay();
})