Добрый день, пытаюсь реализовать свой кастомный прогресс бар для слайдера, дело в том что слайдеров не 1, а может быть множество, и соответственно слайдов у каждого слайдера так же может быть разное количество, поэтому статичный прогресс бар сделать не получится, нужна динамика.
Так же самое главное что у Swiper включен FreeMode, позволяет скролить по 100px, так вот к чему я пришел.
Я беру, получаю общую ширину слайдера, и беру transform: transalteX у этого слайдера (трансформ динамическое значение), и собственно делю второе на первое, и умножаю на 100, получая процент, и передаю это значение в свой прогресс бар, казалось все должно работать, но есть одно но, условно у нас в первом слайдере:
4 слайда - 1 слайд 1427px, общая ширина 5708px, и максимальное значение прокрутки до упора = 5181px
3 слайда - 1 слайд 1427px, общая ширина 4281px, и максимальное значение прокрутки до упора = 3454px
Так вот, проблема в том что отнимая ширину и макс. значение прокрутки у первого получаем - 527px, и все бы у нас заработало если бы это значение было и у второго слайдера, но его значение будет = 827px
и тогда наш прогресс бар уже не отрабатывает соответственным образом, банально не заполняется весь
вот код
let progressBarLine = target.closest('.slider__content').querySelector('.progress-line');
let progressSlider =parseInt((target.closest('.slider__content').querySelector('.slider__wrapper').style.transform.split(/\w+\(|\);?/)[1].split(',')[0]));
let slides = target.closest('.slider__content').querySelector('.slider__items').querySelectorAll('.slider__item');
let widthSlider = 0;
slides.forEach(slide => {
widthSlider += parseInt(slide.offsetWidth)
});
progressBarLine.style.transform = `translateX(${Math.round(100 * Math.abs(progressSlider) / widthSlider)}px)`;
Если есть какие-то идеи, или предложения, буду очень признателен...
P.S.
Пытаюсь повторить слайдер как тут:
https://gabriel-cuallado.com/gallery/cotid/
но знаю что там реализован он собственноручно, а у меня swiper , но тем не менее принцип ведь тот же, я пытался взять код оттуда, но там все следы грамотно заметены..
