Как сделать полосу вместо точек у слайдера?

Для создания полосы вместо точек у слайдера в 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%);
}

В результате у вас будет создан слайдер с полосой вместо точек. Когда вы будете переключать слайды, полоса будет обновляться, отображая текущий прогресс слайдера.