swiper---设置鼠标移入关闭自动播放

在使用swiper的时候,特别是在做轮播图的时候,我们的期望是当鼠标移入,关闭自动播放,鼠标移出的时候,自动播放。

var swiper = new Swiper('#swiper',{
  watchSlidesProgress:true,
  slidesPerView:'auto',
  centeredSlides:true,
  loop:true,
  loopedSlides:7,
  autoplay:{
    delay: 2500,
    disableOnInteraction: false
  },
  navigation:{
    nextEl:'.swiper-button-next',
    prevEl:'.swiper-button-prev',
  },
  pagination:{
    el:'.swiper-pagination'
  }
});
swiper.el.onmouseover = function(){
    swiper.autoplay.stop();
};
swiper.el.onmouseleave = function(){
    swiper.autoplay.start();
}; 
swiper.on('click',function(e){
    console.log(e.target);
});

打完收工!

posted @ 2024-01-04 15:48  帅到要去报警  阅读(202)  评论(0编辑  收藏  举报