День 19 | Создаем слайдер на чистом JS

Что такое слайдер?

Слайдер (или карусель) — это компонент, который показывает несколько элементов по очереди. Один элемент виден, остальные скрыты. Пользователь может переключать слайды кнопками или они переключаются автоматически.

Где используются слайдеры?

• Галереи изображений
• Отзывы клиентов
• Портфолио проектов
• Рекламные баннеры
• Новости и статьи

HTML структура слайдера

Создайте структуру в HTML:

<div class="slider">
  <div class="slider__container">
    <div class="slider__slide active">
      <div class="slide-content">Слайд 1</div>
    </div>
    <div class="slider__slide">
      <div class="slide-content">Слайд 2</div>
    </div>
    <div class="slider__slide">
      <div class="slide-content">Слайд 3</div>
    </div>
  </div>
  
  <button class="slider__btn slider__btn--prev">‹</button>
  <button class="slider__btn slider__btn--next">›</button>
  
  <div class="slider__indicators">
    <span class="indicator active" data-slide="0"></span>
    <span class="indicator" data-slide="1"></span>
    <span class="indicator" data-slide="2"></span>
  </div>
</div>

Разберём структуру:

• slider__container — контейнер для всех слайдов
• slider__slide — один слайд
• active — класс для активного (видимого) слайда
• slider__btn--prev/next — кнопки навигации
• indicator — точка-индикатор (показывает, какой слайд активен)
• data-slide — номер слайда (начинается с 0)

CSS для слайдера

Классы в JavaScript

Для слайдера мы используем класс — это способ организовать код. Класс — это шаблон для создания объектов.

Что такое класс? Класс — это как чертёж для создания объектов. Один класс можно использовать для создания множества объектов с одинаковой структурой, но разными данными.

class Slider {
  constructor(container) {
    // Код конструктора
  }
  
  init() {
    // Метод инициализации
  }
}

Разберём синтаксис:

• class Slider — объявление класса с именем Slider
• constructor(container) — конструктор (функция, которая вызывается при создании объекта)
  • container — параметр (элемент слайдера со страницы)
• this — ключевое слово, которое ссылается на текущий объект
• this.container — свойство объекта (хранит контейнер слайдера)

Как создать объект из класса?

const slider = new Slider(containerElement);

new — ключевое слово для создания объекта из класса. Вызывает конструктор и создаёт новый объект.

Разбор кода слайдера построчно

Конструктор

constructor(container) {
  this.container = container;
  this.slides = container.querySelectorAll('.slider__slide');
  this.indicators = container.querySelectorAll('.indicator');
  this.prevBtn = container.querySelector('.slider__btn--prev');
  this.nextBtn = container.querySelector('.slider__btn--next');
  this.currentSlide = 0;
  this.autoPlayInterval = null;
  
  this.init();
}

Что происходит:

• Сохраняем контейнер слайдера в this.container
• Находим все слайды и сохраняем в this.slides
• Находим все индикаторы и сохраняем в this.indicators
• Находим кнопки навигации
• this.currentSlide = 0 — текущий слайд (начинаем с первого, индекс 0)
• this.autoPlayInterval = null — переменная для хранения таймера автоплея
• this.init() — вызываем метод инициализации

Метод init()

init() {
  // Обработчики кнопок
  this.prevBtn.addEventListener('click', () => this.prev());
  this.nextBtn.addEventListener('click', () => this.next());
  
  // Обработчики индикаторов
  this.indicators.forEach((indicator, index) => {
    indicator.addEventListener('click', () => this.goToSlide(index));
  });
  
  // Автоплей
  this.startAutoPlay();
  
  // Остановка при наведении
  this.container.addEventListener('mouseenter', () => this.stopAutoPlay());
  this.container.addEventListener('mouseleave', () => this.startAutoPlay());
}

Разберём:

• Добавляем обработчики клика на кнопки "назад" и "вперёд"
• Добавляем обработчики на индикаторы (при клике переходим на соответствующий слайд)
• forEach((indicator, index) => ...) — для каждого индикатора получаем его индекс (позицию)
• Запускаем автоплей
• Останавливаем автоплей при наведении мыши (чтобы пользователь мог спокойно посмотреть слайд)

Метод goToSlide()

goToSlide(index) {
  this.slides[this.currentSlide].classList.remove('active');
  this.indicators[this.currentSlide].classList.remove('active');
  
  this.currentSlide = index;
  
  this.slides[this.currentSlide].classList.add('active');
  this.indicators[this.currentSlide].classList.add('active');
}

Что происходит:

1. Убираем класс active с текущего слайда и индикатора
2. Обновляем this.currentSlide на новый индекс
3. Добавляем класс active к новому слайду и индикатору

Что такое массив и индексы? Массив — это список элементов. Каждый элемент имеет индекс (номер позиции), начиная с 0:

const arr = ["первый", "второй", "третий"];
// Индексы:     0         1         2

arr[0]; // "первый"
arr[1]; // "второй"
arr[2]; // "третий"

Метод next()

next() {
  const nextIndex = (this.currentSlide + 1) % this.slides.length;
  this.goToSlide(nextIndex);
}

Разберём логику:

• this.currentSlide + 1 — следующий индекс
• % this.slides.length — оператор остатка от деления
  • Если currentSlide = 2 (последний), то 2 + 1 = 3
  • 3 % 3 = 0 (остаток от деления 3 на 3)
  • Получаем 0 — возвращаемся к первому слайду (бесконечный цикл!)

Пример: Если у нас 3 слайда (индексы 0, 1, 2):

• Текущий слайд 0 → следующий 1
• Текущий слайд 1 → следующий 2
• Текущий слайд 2 → следующий 0 (3 % 3 = 0)

Метод prev()

prev() {
  const prevIndex = (this.currentSlide - 1 + this.slides.length) % this.slides.length;
  this.goToSlide(prevIndex);
}

Логика: Аналогично next(), но в обратную сторону. + this.slides.length нужно, чтобы избежать отрицательных чисел:

• Если currentSlide = 0, то 0 - 1 = -1
• -1 + 3 = 2
• 2 % 3 = 2 (последний слайд)

Автоплей

startAutoPlay() {
  this.autoPlayInterval = setInterval(() => {
    this.next();
  }, 3000);
}

stopAutoPlay() {
  if (this.autoPlayInterval) {
    clearInterval(this.autoPlayInterval);
    this.autoPlayInterval = null;
  }
}

Что такое setInterval? Это функция, которая выполняет код через определённые промежутки времени.

Синтаксис: setInterval(функция, миллисекунды)

• Первый параметр — функция, которую нужно выполнить
• Второй параметр — интервал в миллисекундах (3000 = 3 секунды)
• Возвращает ID интервала (нужен для остановки)

Что такое clearInterval? Останавливает интервал. Нужно передать ID интервала, который вернул setInterval.

Инициализация

document.addEventListener('DOMContentLoaded', () => {
  const slider = document.querySelector('.slider');
  if (slider) {
    new Slider(slider);
  }
});

Что такое DOMContentLoaded? Это событие, которое срабатывает, когда HTML загружен и распарсен (но изображения и стили могут ещё загружаться).

Почему это важно? Если мы попытаемся найти элементы до загрузки страницы, они не будут найдены. DOMContentLoaded гарантирует, что элементы уже есть на странице.

Проверка if (slider): Проверяем, что элемент найден. Если слайдера нет на странице, querySelector вернёт null, и мы не будем пытаться создать слайдер.

Практическое задание

1. Создайте HTML структуру слайдера
2. Стилизуйте слайды, кнопки навигации и индикаторы
3. Напишите класс Slider с методами next(), prev(), goToSlide()
4. Добавьте автоплей с возможностью остановки при наведении
5. Реализуйте индикаторы (точки) для переключения слайдов
6. Добавьте плавную анимацию переключения
7. Попробуйте добавить бесконечную прокрутку (когда последний слайд, следующий — первый)

Что дальше?

Отлично! Вы создали полнофункциональный слайдер. В следующем уроке мы создадим табы — ещё один популярный компонент для организации контента.