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 @   帅到要去报警  阅读(977)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
· DeepSeek 开源周回顾「GitHub 热点速览」
历史上的今天:
2021-01-04 Thinkphp---模型关联查询
2021-01-04 thinkphp---封装服务层
点击右上角即可分享
微信分享提示