Swiperjs контролирует скорость нескольких ползунков ⇐ Javascript

[Гость]

Я хочу соответствовать критериям WCAG 2.1 и позволить пользователям изменять скорость ползунков. Я использую swiperjs на своей странице. Мне удалось заставить его работать с первым слайдером, но не со вторым. Я предполагаю, что это потому, что const defaultSpeed ​​относится только к headerSlider. Я не знаю, как изменить это, чтобы оно работало на них обоих.

const customSlider = document.getElementById('custom-slider'); const слайдерThumb = document.getElementById('slider-thumb'); // Инициализируем заголовокSlider const headerSlider = новый Swiper('.header__slider', { скорость: 400, // Скорость по умолчанию (миллисекунды) Автовоспроизведение: { задержка: 3000, // Задержка автозапуска по умолчанию DisableOnInteraction: false, // Предотвращаем остановку автовоспроизведения при взаимодействии }, эффект: «затухание», клавиатура: { включено: правда, }, нумерация страниц: { el: '.slider__pagination', кликабельно: правда, BulletActiveClass: 'swiper-pagination-bullet-active--white', BulletClass: 'swiper-pagination-bullet--white', }, }); // Инициализируем aboutSlider const aboutSlider = новый Swiper('.about-us__slider', { скорость: 400, // Скорость по умолчанию (миллисекунды) Автовоспроизведение: { задержка: 3000, // Задержка автозапуска по умолчанию DisableOnInteraction: false, // Предотвращаем остановку автовоспроизведения при взаимодействии }, клавиатура: { включено: правда, }, нумерация страниц: { el: '.about__пагинация', кликабельно: правда, BulletActiveClass: 'swiper-pagination-bullet-active--white', BulletClass: 'swiper-pagination-bullet--white', }, }); // Вычисляем начальную позицию ползунка на основе скорости по умолчанию константная минскорость = 2000; // Минимальная скорость (миллисекунды) константная максимальная скорость = 100; // Максимальная скорость (миллисекунды) const defaultSpeed ​​= headerSlider.params.speed; // Используем скорость по умолчанию для headerSlider const InitialPosition = ((defaultSpeed ​​- minSpeed) / (maxSpeed ​​- minSpeed)) * (customSlider.clientWidth - слайдерThumb.clientWidth); // Устанавливаем начальную позицию ползунка-палец слайдерThumb.style.left = InitialPosition + 'px'; пусть isDragged = false; слайдерThumb.addEventListener('mousedown', (e) => { е.preventDefault(); isDragged = правда; document.addEventListener('mousemove', moveSlider); document.addEventListener('mouseup', ReleaseSlider); }); функция moveSlider(e) { if (!isDragged) return; const слайдерРект = customSlider.getBoundingClientRect(); const newPosition = e.clientX - слайдерRect.left; // Ограничиваем ползунок внутри границ ползунка константа minPosition = 0; const maxPosition = слайдерРект.ширина - слайдерТхумб.клиентШидт; if (newPosition >= minPosition && newPosition { headerSlider.autoplay.start(); playButton.style.display = 'нет'; stopButton.style.display = 'блокировать'; }); stopButton.addEventListener('click', () => { headerSlider.autoplay.stop(); stopButton.style.display = 'нет'; playButton.style.display = 'блок'; }); const aboutPlayButton = document.querySelector('.about-slider__play'); const aboutStopButton = document.querySelector('.about-slider__pause'); aboutPlayButton.addEventListener('click', () => { aboutSlider.autoplay.start(); aboutPlayButton.style.display = 'нет'; aboutStopButton.style.display = 'блокировать'; }); aboutStopButton.addEventListener('click', () => { aboutSlider.autoplay.stop(); aboutStopButton.style.display = 'нет'; aboutPlayButton.style.display = 'блокировать'; }); .header__slider {float:left;} .slider__play:before, .slider__pause:before {content: ""; -webkit-mask-repeat: без повтора; повтор маски: без повтора; -webkit-mask-size: 100%; размер маски: 100%; } .slider__controls { дисплей: гибкий; позиция: абсолютная; z-индекс: 50; ширина: авто; } @media (минимальная ширина: 1700 пикселей) { .slider__controls { отступ: 24 пикселя; } } .slider__controls--orangeBg { цвет фона: #f79422; } .slider__controls--whiteBg { цвет фона: #ffffff; } .slider__play-stop-btn { ширина: 20 пикселей; высота: 20 пикселей; положение: относительное; поле справа: 32 пикселя; } .slider__play, .slider__pause { позиция: абсолютная; верх: 0; слева: 0; отображение: встроенный блок; } .slider__play--orange:before, .slider__pause--orange:before { цвет фона: #f79422; } .slider__play--white:before, .slider__pause--white:before { цвет фона: #ffffff; } .slider__play:before, .slider__pause:before { содержание: ""; дисплей: блок; ширина: 16 пикселей; высота: 20 пикселей; } .slider__play { дисплей: нет; } .slider__play:до { -webkit-mask-image: url(../../dist/img/icon-play.svg); маска-изображение: URL(../../dist/img/icon-play.svg); } .slider__pause:before { -webkit-mask-image: url(../../dist/img/icon-pause.svg); маска-изображение: URL(../../dist/img/icon-pause.svg); } .slider__change-speed { ширина: 100 пикселей; высота: 5 пикселей; цвет фона: #fff; положение: относительное; поле сверху: 7 пикселей; поле справа: 32 пикселя; } .slider__speed-btn { ширина: 15 пикселей; высота: 15 пикселей; цвет фона: #fff; радиус границы: 64 пикселей; позиция: абсолютная; верх: -5 пикселей; слева: 0; курсор: указатель; } .slider__pagination { высота: 20 пикселей; } .slider__pagination .swiper-pagination-bullet--white { граница: сплошная 2 пикселя #ffffff; цвет фона: прозрачный; } .slider__pagination .swiper-pagination-bullet --orange { граница: сплошная 2 пикселя #f79422; цвет фона: прозрачный; } .slider__pagination .swiper-pagination-bullet-active--white { цвет фона: #ffffff; } .slider__pagination .swiper-pagination-bullet-active-orange { цвет фона: #f79422; } .slider__pagination .swiper-pagination-bullet--white, .slider__pagination .swiper-pagination-bullet--оранжевый { отображение: встроенный блок; высота: 20 пикселей; ширина: 20 пикселей; поле: 0 8 пикселей; радиус границы: 96 пикселей; } .header-slider { положение: относительное; ширина: 100%; } .header-slider__carousel { поле слева: 0; } .header-slider__item { стиль списка: нет; переполнение: скрыто; } .header-slider .swiper-slide-active p { задержка анимации: 0,6 с; непрозрачность: 1; трансформировать: транслироватьY(0); } .header-slider__img { объектное соответствие: обложка; ширина: 100%; } @media (минимальная ширина: 1700 пикселей) { .header-slider__img { высота: 600 пикселей; } } .header-slider__controls { правильно: 0; внизу: 7 пикселей; } .about-us__slider { переполнение: скрыто; положение: относительное; } .about-us-slider__img { ширина: 100%; высота: 100%; объектное соответствие: обложка; } .about-us-slider__controls { правильно: 0; внизу: 0; [*] ползунок заголовка

• Класс
  
• 
  

О слайдере

• 
  
•