Swiper4重写分页器样式

最新推荐文章于 2023-11-22 14:54:26 发布

原创最新推荐文章于 2023-11-22 14:54:26 发布 · 4.3k 阅读

0 ·

CC 4.0 BY-SA版权

前端学习专栏收录该内容

6 篇文章

订阅专栏

本文详细介绍了如何在Swiper4中重新设计分页器样式，通过自定义CSS和JavaScript实现个性化效果，包括改变分页器点的颜色、形状、布局等，让你的滑动展示更加独特。

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

new Swiper('.swiper-container', {
        pagination: '.swiper-pagination',
        paginationClickable: false,
        paginationType: 'custom',
        loop: true, 
        speed: 300,
        autoplay: 4000,
        // 滑动结束后, 继续轮播
        autoplayDisableOnInteraction: true,
        // 自定义分页样式
        paginationCustomRender: function (swiper, current, total) {
          const activeColor = '#168fed'
          const normalColor = '#aeaeae'
          let color = ''
          let paginationStyle = ''
          let html = ''
          for (let i = 1; i <= total; i++) {
            if (i === current) {
              color = activeColor
            } else {
              color = normalColor
            }
            paginationStyle = `background:${color};opacity:1;margin-right:0.875rem;`
            html += `<span class="swiper-pagination-bullet" style=${paginationStyle}></span>`
          }
          return html
        }
      })