解决swiper loop=true点击事件失效问题

最新推荐文章于 2024-06-27 15:08:17 发布

最初都是小白

最新推荐文章于 2024-06-27 15:08:17 发布

阅读量5.2k

点赞数 3

CC 4.0 BY-SA版权

分类专栏： JS 文章标签：前端 swiper

本文链接：https://blog.youkuaiyun.com/Originally_M/article/details/121685230

JS 专栏收录该内容

25 篇文章

订阅专栏

当Swiper设置为loop模式时，由于首尾DOM的复制导致部分swiper-slide的点击事件失效。解决办法是在new Swiper时定义click事件，通过event.target获取DOM并执行相应方法。这样可以确保点击事件在循环轮播中正常工作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天遇到一个问题，一个循环轮播的swiper，当设置loop为true的时候，部分swiper-slide的点击事件失效了

原因： loop为true时，会自动复制首尾dom，复制时并不会复制dom上的点击事件

解决办法： 去掉swiper-slide上的点击事件，在new Swiper 里定义事件，代码如下

 let Swiper = new Swiper("#mySwiper", {
                direction: "vertical",  //纵向轮播
                loop: true, //循环
                on:{   //事件
                  click:(event) =>{
                  //event.target 为dom元素，可以按需求取它的class或者其他属性
                  //我的是img所以我取的src属性
                    let src =  event.target.src 
                     this.list.map(item =>{ 
                      if(src.indexOf(item.url) != -1) {
                        this.toSubjectDetail(item) // 执行想要执行的方法
                      }
                    })
                }
                },
                autoplay: {
                    delay: 2000,
                    disableOnInteraction: false
                },
                observer: true,
                observeParents: true,
              });