Может есть у кого пример
нужен слайдер, у которого есть прогрессбар
линия, которая плавно расширяется от 0% до 100%, далее на пролистывании на следующий слайд линия заново плавно подгружается от 0 до 100%
возможно на чем то другом, если нет на свипер
уже запарился мучить
все не то
document.addEventListener('DOMContentLoaded', function () {
var swiper = new Swiper('.swiper-container', {
pagination: {
el: '.swiper-pagination',
type: 'progressbar'
},
autoHeight: true,
slidesPerView: 1,
spaceBetween: 0,
loop: true,
autoplay: {
delay: 3000,
disableOnInteraction: false
},
effect: 'fade',
fadeEffect: {
crossFade: true
},
on: {
slideChange: function () {
var currentSlide = this.activeIndex + 1;
document.querySelector('.slide-counter').textContent = padZero(currentSlide);
// Удаляем класс 'swiper-progressbar' со всех слайдов
var progressBars = document.querySelectorAll('.swiper-progressbar');
progressBars.forEach(function (bar) {
bar.classList.remove('swiper-progressbar');
});
// Добавляем класс 'swiper-progressbar' только на активном слайде
var activeSlide = this.slides[this.activeIndex];
var progressBar = activeSlide.querySelector('.swiper-progressbar');
progressBar.classList.add('swiper-progressbar');
}
}
});
function padZero(num) {
return (num < 10) ? '0' + num : num.toString();
}
});
