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或者1
  speed: 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();
})