Для создания полосы вместо точек у слайдера в JavaScript, вы можете использовать CSS свойства, а также некоторый корректный JavaScript код.
Вот пример шагов, которые можно предпринять для создания полосы вместо точек у слайдера:
1. В HTML файле разместите элемент <div>
с классом "slider" и добавьте в него ваши слайды:
<div class="slider"> <div class="slide">Slide 1</div> <div class="slide">Slide 2</div> <div class="slide">Slide 3</div> </div>
2. В CSS файле добавьте стили для элементов слайдера, включая полосу:
.slider { position: relative; width: 100%; height: 300px; } .slide { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: none; } .slide.active { display: block; } .slider::before { content: ""; position: absolute; top: 50%; left: 0; width: 100%; height: 2px; background-color: black; transform: translateY(-50%); }
3. В JavaScript файле добавьте логику для управления слайдером и обновления полосы:
const slider = document.querySelector('.slider'); const slides = Array.from(slider.getElementsByClassName('slide')); let currentIndex = 0; // Показывать первый слайд slides[currentIndex].classList.add('active'); // Функция для обновления слайдов и полосы function updateSlider() { slides.forEach(slide => slide.classList.remove('active')); slides[currentIndex].classList.add('active'); const progress = (currentIndex / (slides.length - 1)) * 100; // Процент прогресса slider.style.setProperty('--progress', `${progress}%`); } // Функция для переключения слайдов function nextSlide() { if (currentIndex === slides.length - 1) { currentIndex = 0; } else { currentIndex++; } updateSlider(); } // Функция для предыдущего слайда function prevSlide() { if (currentIndex === 0) { currentIndex = slides.length - 1; } else { currentIndex--; } updateSlider(); } // Обработчики событий для кнопок переключения слайдов document.getElementById('next').addEventListener('click', nextSlide); document.getElementById('prev').addEventListener('click', prevSlide);
4. Наконец, в CSS файле добавьте стили для полосы на основе переменной, установленной в JavaScript:
.slider::before { /*...*/ width: var(--progress, 0%); }
В результате у вас будет создан слайдер с полосой вместо точек. Когда вы будете переключать слайды, полоса будет обновляться, отображая текущий прогресс слайдера.