Маркировка страниц Swiper: стиль для маркера нумерации страниц посещенных слайдов. ⇐ CSS

[Anonymous]

Я создал этот слайдер с нумерацией страниц и индикатором выполнения. Он меняет цвет маркера (на #000) на активных слайдах. Есть ли способ изменить цвет маркеров посещенного слайда (на #000) - так, чтобы только маркер непосещенного слайда имел серый фон #DDD?Вот мой код:
HTML:

Код: Выделить всё

Slide 1
Slide 2
Slide 3
...

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%;}
}

JS:

Код: Выделить всё

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 '' + '[i][/i]' + '[/b]'  + '';
},
},
})

Любые указатели будут очень полезны. Большое вам спасибо.
В JavaScript я попытался добавить прослушиватель событий для посещенного слайда посредством щелчка и ранее добавил класс «посещенный слайд». Однако для этого требуется щелчок, но цвет маркера не обновляется автоматически во время анимации слайда.

Подробнее здесь: https://stackoverflow.com/questions/782 ... et-as-well