Как сделать слайдер на чистом javascript

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

Слайдер на чистом Javascript

Для создания слайдера на чистом Javascript нам понадобится следующее:

• HTML-файл со слайдером
• CSS-файл для стилизации слайдера
• JavaScript-файл для логики и интерактивности слайдера

В нашем HTML-файле мы создадим контейнер для нашего слайдера и обернем его в класс «slider»:

<div class="slider">
  <div class="slide">Slide 1</div>
  <div class="slide">Slide 2</div>
  <div class="slide">Slide 3</div>
  <div class="slide">Slide 4</div>
</div>

Далее мы добавим кнопки перелистывания слайдов:

<div class="slider">
  <div class="slide">Slide 1</div>
  <div class="slide">Slide 2</div>
  <div class="slide">Slide 3</div>
  <div class="slide">Slide 4</div>
  <div class="slider-buttons">
    <button id="prev">&lt;</button>
    <button id="next">&gt;</button>
  </div>
</div>

Теперь перейдем к CSS-файлу. В нем мы установим следующие стили для контейнера и слайдов:

.slider {
  position: relative;
  overflow: hidden;
  width: 600px;
  height: 400px;
}

.slide {
  float: left;
  width: 600px;
  height: 400px;
}

Теперь мы перейдем к JavaScript-файлу. В начале мы создадим переменные для наших элементов:

const slider = document.querySelector('.slider');
const slides = document.querySelectorAll('.slide');
const prev = document.querySelector('#prev');
const next = document.querySelector('#next');

Затем мы создадим функцию для установки активного слайда:

function setActiveSlide(slide) {
  // удаляем активный класс у всех слайдов
  slides.forEach(slide => slide.classList.remove('active'));
  // добавляем активный класс текущему слайду
  slide.classList.add('active');
}

Затем мы создадим две функции, для переключения на предыдущий и следующий слайд:

function prevSlide() {
  const activeSlide = document.querySelector('.slide.active');
  // если активный слайд первый, то переключаемся на последний
  if (activeSlide.previousElementSibling) {
    setActiveSlide(activeSlide.previousElementSibling);
  } else {
    setActiveSlide(slides[slides.length - 1]);
  }
}

function nextSlide() {
  const activeSlide = document.querySelector('.slide.active');
  // если активный слайд последний, то переключаемся на первый
  if (activeSlide.nextElementSibling) {
    setActiveSlide(activeSlide.nextElementSibling);
  } else {
    setActiveSlide(slides[0]);
  }
}

Теперь мы добавим обработчики событий для кнопок «Назад» и «Вперед»:

prev.addEventListener('click', prevSlide);
next.addEventListener('click', nextSlide);

Наконец, мы добавим наш слайдер на страницу, установим активный слайд по умолчанию и затем запустим его на исполнение:

// добавляем слайдер на страницу
document.body.appendChild(slider);
// устанавливаем активный слайд по умолчанию
setActiveSlide(slides[0]);