Создаём кастомный слайдер на чистом JavaScript: от нуля до бесконечной прокрутки

Хотите добавить на сайт слайдер, который идеально впишется в ваш дизайн, будет быстрым и независимым от сторонних библиотек? Создание карусели изображений на чистом JavaScript — это не только отличный способ прокачать навыки фронтенд-разработки, но и гарантия полного контроля над каждым пикселем и поведением. Давайте разберём процесс от базовой разметки до продвинутых фишек вроде бесконечной прокрутки и touch-свайпов.

Зачем писать слайдер самому?

Библиотеки вроде Slick или Swiper — это удобно, но они часто приносят с собой лишний код, могут конфликтовать с другими скриптами и ограничивают в кастомизации. Свой слайдер будет легковесным, точно соответствовать задачам проекта и станет ценной строчкой в вашем портфолио.

Фундамент: HTML и CSS

Всё начинается с правильной семантической разметки и стилей.

Базовая структура

<div class=\"slider-container\">
  <div class=\"slider-track\">
    <div class=\"slide\"><img src=\"1.jpg\" alt=\"\"></div>
    <div class=\"slide\"><img src=\"2.jpg\" alt=\"\"></div>
    <div class=\"slide\"><img src=\"3.jpg\" alt=\"\"></div>
  </div>
  <button class=\"slider-btn prev\">&lt;</button>
  <button class=\"slider-btn next\">&gt;</button>
  <div class=\"slider-dots\"></div>
</div>

Ключевой CSS-приём — display: flex для .slider-track и overflow: hidden для контейнера. Каждый слайд должен иметь фиксированную ширину (например, 100%).

Оживляем слайдер: JavaScript логика

1. Инициализация и переменные

const track = document.querySelector('.slider-track');
const slides = Array.from(track.children);
const nextBtn = document.querySelector('.slider-btn.next');
const prevBtn = document.querySelector('.slider-btn.prev');
const dotsContainer = document.querySelector('.slider-dots');
let currentSlide = 0;
const slideWidth = slides[0].getBoundingClientRect().width;

2. Функция перемещения

function moveToSlide(slideIndex) {
  // Запрещаем уход за границы
  if (slideIndex < 0) slideIndex = slides.length - 1;
  if (slideIndex >= slides.length) slideIndex = 0;
  
  const amountToMove = -slideIndex * slideWidth;
  track.style.transform = `translateX(${amountToMove}px)`;
  currentSlide = slideIndex;
  updateDots();
}

3. Создание навигационных точек

function createDots() {
  slides.forEach((_, index) => {
    const dot = document.createElement('button');
    dot.classList.add('slider-dot');
    if (index === 0) dot.classList.add('active');
    dot.addEventListener('click', () => moveToSlide(index));
    dotsContainer.appendChild(dot);
  });
}

Добавляем продвинутые функции

• Touch-свайпы: Используйте события touchstart, touchmove, touchend для определения направления и длины свайпа.
• Автопрокрутка: Простой setInterval, который вызывает moveToSlide(currentSlide + 1). Не забудьте очищать интервал при наведении мыши.
• Адаптивность: Следите за событием resize и пересчитывайте slideWidth.

Оптимизация и доступность

1. Добавьте кнопкам атрибуты aria-label ("Следующий слайд", "Предыдущий слайд").
2. Управляйте фокусом с клавиатуры (Tab, стрелки).
3. Приостанавливайте автопрокрутку, когда пользователь взаимодействует со слайдером или страница неактивна.

FAQ: Часто задаваемые вопросы

Сложно ли сделать слайдер самому?

Нет, это отличный проект для среднего уровня. Основная логика укладывается в 50-100 строк кода.

Что лучше: свой слайдер или библиотека?

Библиотека — для быстрого решения сложных задач (например, 3D-эффекты). Свой слайдер — для полного контроля, обучения и лёгких проектов.

Как реализовать fade-эффект вместо сдвига?

Вместо трансформации меняйте opacity слайдов и используйте position: absolute. Плавный переход обеспечит CSS transition: opacity.

Почему слайдер "прыгает" на мобильных?

Вероятно, не учтена ширина scrollbar или не назначен метатег viewport. Убедитесь, что slideWidth рассчитывается корректно после полной загрузки DOM.

Как добавить ленивую загрузку изображений?

Замените атрибут src на data-src и загружайте изображение, когда слайд становится активным или соседним.