swiper鼠标放上停止轮播事件

Swiper轮播图配置详解

最新推荐文章于 2024-07-11 08:42:25 发布

曲小强

最新推荐文章于 2024-07-11 08:42:25 发布

阅读量2.4w

点赞数 12

CC 4.0 BY-SA版权

分类专栏：小卖部 js 文章标签：停止轮播事件

本文链接：https://blog.youkuaiyun.com/quhongqiang/article/details/84936977

小卖部 js 专栏收录该内容

63 篇文章

订阅专栏

本文详细介绍了如何使用Swiper JavaScript库配置自动播放的轮播图，包括设置轮播间隔、鼠标悬停暂停功能及分页导航。适用于前端开发者快速上手Swiper轮播组件。

var mySwiper = new Swiper('.swiper-container', {
      spaceBetween: 30,
      centeredSlides: true,
      loop: true, //循环播放
      autoplay: { //播放时间间隔
        delay: 5000,
        disableOnInteraction: false,
      },
      pagination: {
        el: '.swiper-pagination',
        clickable: true,
      },
      // navigation: {
      //   nextEl: '.swiper-button-next',
      //   prevEl: '.swiper-button-prev',
      // },
    });
    mySwiper.el.onmouseover = function(){ //鼠标放上暂停轮播
      mySwiper.autoplay.stop();
    }
    mySwiper.el.onmouseleave = function(){
      mySwiper.autoplay.start();
    }