Swiper React 如何将分页圆点替换为图片并区分激活状态

方案1：使用custom类型自定义分页器（自由度最高） #

renderCustom函数接收3个参数：

• swiper：Swiper实例对象
• current：当前激活的分页项索引，注意该值从1开始计数，不是0
• total：分页项总数量

循环生成分页项时，判断遍历序号是否等于current，即可区分激活/非激活状态，分别渲染对应图片即可。
首先提前导入图片资源，避免路径解析错误：

// 提前导入分页指示器图片
import inactiveDot from '../../../assets/images/slider-pagination.png'
import activeDot from '../../../assets/images/slider-pagination-active.png'

对应Swiper配置代码：

<Swiper
    modules={[Navigation, Pagination]}
    spaceBetween={10}
    slidesPerView={2}
    navigation
    pagination={{
        clickable: true,
        type: "custom",
        renderCustom: (swiper, current, total) => {
            let paginationContent = ''
            for (let i = 1; i <= total; i++) {
                const isActive = i === current
                paginationContent += `
                    <span class="custom-dot ${isActive ? 'custom-dot-active' : ''}" data-index="${i}">
                        <img src="${isActive ? activeDot : inactiveDot}" alt="分页指示器" />
                    </span>
                `
            }
            return paginationContent
        }
   }}
>
    {/* 此处放置SwiperSlide组件 */}
</Swiper>

后续可给.custom-dot类设置宽高、间距调整样式。

方案2：CSS覆盖默认分页圆点样式（修复原有写法不生效问题） #

你之前写的样式不生效是3个常见问题导致的：

• 默认分页圆点自带纯色background属性，仅设置background-image会被纯色背景覆盖，必须先清空默认背景
• 未给分页圆点设置固定宽高，背景图没有承载尺寸无法显示
• 如果样式写在CSS Module等带作用域隔离的样式文件中，类名会被编译加哈希，无法匹配Swiper生成的全局DOM类名，需要写在全局样式中，或使用全局作用域语法包裹

正确的CSS代码如下：

/* 写在无作用域隔离的全局样式文件中 */
.swiper-pagination-bullet {
    /* 按你的图片实际尺寸设置宽高 */
    width: 8px;
    height: 8px;
    /* 先清除默认的纯色背景 */
    background: none !important;
    background-size: 100% 100% !important;
    background-repeat: no-repeat !important;
    /* 非激活状态图片 */
    background-image: url('../../../assets/images/slider-pagination.png') !important;
    /* 去掉默认非激活项的半透明效果 */
    opacity: 1;
}

.swiper-pagination-bullet-active {
    /* 激活状态图片 */
    background-image: url('../../../assets/images/slider-pagination-active.png') !important;
}

如果使用CSS Module，需要用:global()包裹类名：

:global(.swiper-pagination-bullet) {
    /* 同上样式规则 */
}
:global(.swiper-pagination-bullet-active) {
    /* 同上样式规则 */
}

内容的提问来源于stack exchange，提问作者Jolan