Swiper4重写分页器样式

本文详细介绍了如何在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
        }
      })
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值