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);
});

打完收工!

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章