Swiper分页器hover跳转

最新推荐文章于 2024-04-05 21:53:19 发布

高子盛

最新推荐文章于 2024-04-05 21:53:19 发布

阅读量1.2k

点赞数 1

文章标签： javascript html html5

本文链接：https://blog.youkuaiyun.com/MrGraffiti/article/details/120777573

版权

这篇博客主要介绍了如何在Swiper配置中设置paginationRender事件，监听并模拟点击滑动分页按钮。通过为每个分页点添加鼠标进入监听，当鼠标悬停时触发对应的点击事件，实现交互效果。内容涉及到Swiper的配置选项如mousewheel, navigation, freeMode等，并展示了自定义分页点的渲染方法。

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

当paginationRender 完成给对应按钮做鼠标进入监听模拟点击

  swiperOptions: {
        mousewheel: true,
        slidesPerView: 'auto',
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev'
        },
        freeMode: true,
        observer: true,
        observeParents: true,
        observeSlideChildren: true,
        on: {
          paginationRender: function() {
            console.log('paginationRender')
            const pages = document.getElementsByClassName('swiper-pagination-bullet')
            for (let i = 0; i < pages.length; i++) {
              pages[i].onmouseover = function(e) {
                e.target.click()
              }
            }
          }
        },
        pagination: {
          el: '.swiper-pagination',
          clickable: true,
          renderBullet(index, className) {
            return `<span class="${className} swiper-pagination-bullet-custom">${index + 1}</span>`
          }
        }
      }