Swiper4重写分页器样式

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
        }
      })

猜你喜欢

转载自blog.csdn.net/Tongzhiyong233/article/details/80952871