Swiper分页圆点样式优化：设置已访问幻灯片圆点为黑色

我做了一个带进度条分页的Swiper滑块，当前激活的幻灯片分页圆点会变成#000，但想让所有已访问过的幻灯片对应的分页圆点都改为#000，只有未访问的保留#DDD灰色背景。之前试过用点击事件添加visited-slide类，但自动轮播时没法同步更新圆点样式，以下是我的初始代码：

初始代码 #

HTML #

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>

<!-- Slider main container -->
<div class="swiper-container">
    <!-- Additional required wrapper -->
    <div class="swiper-wrapper">
        <!-- Slides -->
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
    </div>
    <!-- If we need pagination -->
    <div class="swiper-pagination"></div>
</div>

CSS #

:root {
    --swiper-pagination-bullet-border-radius: 0;
    --swiper-pagination-bullet-width: 40px;
    --swiper-pagination-bullet-height: 2px;
}

body {
  font-family: Helvetica;
  color: #000;
}

.swiper-container {
  width: 100%; height: 100vh;
}

.swiper-wrapper {
  width: 100%; height: 100%;
}

.swiper-slide {
  font-size: 100px; text-align: center;
  line-height:100vh;
}

.swiper-pagination-bullet {
    position: relative;
    height: auto;
    opacity: 1;
    margin-right: 20px;
    background-color: transparent;
    
    .progress-bar-bg {
        position: absolute;
        bottom: 0;
        left: 0;
        z-index: 1;
        width: 100%;
        height: 2px;
        background-color: #DDD;
    }
    .progress-bar-cover {
        position: absolute;
        bottom: 0;
        left:  0;
        z-index: 2;
        width: 0%;
        height: 2px;
        background-color: #000;
    }
}

.swiper-pagination-bullet-active {
    background-color: transparent;
    b {
        animation-name: countingBar;
        animation-duration: 3s;
        animation-timing-function: ease-in;
        animation-iteration-count: 1;
        animation-direction: alternate ;
        animation-fill-mode:forwards;
    }
}

@keyframes countingBar {
    0% {width: 0;}
    100% {width:100%;}
}

JavaScript #

var mySwiper = new Swiper('.swiper-container', {
        loop: true,
        slidesPerView: 1,
        autoplay: {
            delay: 5000,
        },
        effect: 'fade',
        fadeEffect: {
            crossFade: true
        },
        pagination: {
            el: '.swiper-pagination',
            clickable: 'true',
            type: 'bullets',
            renderBullet: function (index, className) {
                return '<span class="' + className + '">' + '<i class="progress-bar-bg"></i>' + '<b class="progress-bar-cover"></b>'  + '</span>';
              },
        },
})

解决方案 #

核心思路是利用Swiper的slideChange事件（手动切换和自动轮播都会触发），维护已访问幻灯片的索引集合，动态给对应分页圆点添加visited-slide类，再通过CSS控制样式。

1. 修改JavaScript代码 #

添加事件监听和已访问索引管理：

var mySwiper = new Swiper('.swiper-container', {
    loop: true,
    slidesPerView: 1,
    autoplay: {
        delay: 5000,
    },
    effect: 'fade',
    fadeEffect: {
        crossFade: true
    },
    pagination: {
        el: '.swiper-pagination',
        clickable: 'true',
        type: 'bullets',
        renderBullet: function (index, className) {
            return '<span class="' + className + '">' + '<i class="progress-bar-bg"></i>' + '<b class="progress-bar-cover"></b>'  + '</span>';
        },
    },
    // 初始化时标记第一张幻灯片为已访问
    on: {
        init: function() {
            const realIndex = this.realIndex;
            const bullets = this.pagination.bullets;
            bullets[realIndex].classList.add('visited-slide');
            // 记录已访问索引，loop模式下用realIndex对应真实幻灯片
            this.visitedSlides = new Set([realIndex]);
        },
        // 每次幻灯片切换时更新已访问状态
        slideChange: function() {
            const realIndex = this.realIndex;
            const bullets = this.pagination.bullets;
            // 如果当前幻灯片未被标记过，添加类并记录
            if (!this.visitedSlides.has(realIndex)) {
                bullets[realIndex].classList.add('visited-slide');
                this.visitedSlides.add(realIndex);
            }
        }
    }
})

2. 补充CSS样式 #

添加visited-slide类的样式，让已访问的圆点背景变成黑色：

/* 已访问幻灯片的分页圆点样式 */
.swiper-pagination-bullet.visited-slide .progress-bar-bg {
    background-color: #000;
}

/* 激活状态优先显示动画进度条 */
.swiper-pagination-bullet-active .progress-bar-bg {
    background-color: #DDD;
}

关键说明 #

• 用realIndex而非activeIndex：因为开启了loop: true，Swiper会复制幻灯片，activeIndex是复制后的索引，realIndex才对应真实的幻灯片顺序。
• visitedSlides集合：避免重复添加类，提升性能。
• 初始化标记第一张幻灯片：确保页面加载后初始幻灯片的圆点直接显示为黑色。

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