Как сделать прогесс-бар таймера слайда на swiper js?

Question

[EVGenyK_ch]

Привет, можете подсказать пример реализации прогресс бара таймера слайда? использую swiper js

Answer 1

[Pochemuchka92688]

Понимаю, что автору вопроса вряд-ли этот вопрос актуален, но когда сам столкнулся с ним, решил написать самостоятельно:
HTML:

<div class="swiper mySwiper">
        <div class="swiper-wrapper">
            <div class="swiper-slide">1</div>
            <div class="swiper-slide">2</div>
            <div class="swiper-slide">3</div>
            <div class="swiper-slide">4</div>
            <div class="swiper-slide">5</div>
        </div>
        <div class="swiper-pagination"></div>
        <div class="timer-swiper"><div class="timer-swiperAfter"></div></div><!--Здесь к обычной верстке свайпера добавил только прогресс-бар. И да, назвал неправильно, знаю)-->
    </div>

JS:

var swiper = new Swiper(".mySwiper", {
        direction: "horizontal",
        slidesPerView: 1,
        spaceBetween: 30,
        loop: true,
        autoplay: {
            delay: 5000,
            disableOnInteraction: false,
        },
        on: {
            slideChange: ()=> {//Здесь мы переключаем старый слайд на новый и нужно обновить прогресс-бар. Без таймаута стиль не обновляется.
                document.querySelector('.timer-swiperAfter').classList.remove('active');
                setTimeout(() => {
                    document.querySelector('.timer-swiperAfter').classList.add('active');
                }, 50);
            },
        },
        pagination: {
          el: ".swiper-pagination",
          clickable: true
        }
 });

Теперь сам CSS:

.timer-swiper{
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 10px;
    background: white;
    z-index: 2;
}
.timer-swiperAfter{
    background: #007aff;
    height: 100%;
    width: 0;
    height: 10px;
    display: block;
}
.timer-swiperAfter.active{
    width: 100%;
    transition: 5s all;
}

Думаю, что те, кто понимают самую базу по Html, css, js поймут что куда да как. Всем путникам - удачи!