Как создать простой и функциональный слайдер на чистом JavaScript 🔥

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

В этой статье вы узнаете, как создать несколько популярных видов слайдеров, используя только чистый JavaScript и никакие дополнительные библиотеки. Это поможет вашему проекту остаться лёгким, быстрым и простым в обслуживании. Поехали!

📌 Почему чистый JavaScript, а не библиотека?

Конечно, библиотеки вроде Swiper, OwlCarousel или SlickJS очень удобны. Но чистый JavaScript имеет явные преимущества:

• 🚀 Меньше размер страницы и выше скорость загрузки;

• 🎯 Полный контроль над функционалом;

• 🛠️ Возможность гибкой и точечной настройки под конкретные задачи.

🔖 Элементы простого слайдера: для чего каждый из них?

Прежде чем начать писать код, давайте разберёмся, зачем нам нужны элементы в структуре HTML и CSS для нашего слайдера.

• Контейнер слайдера (slider): основной блок, ограничивающий видимую область слайдов.

• Контейнер слайдов (slides): внутренний блок, в котором находятся изображения (слайды). С помощью CSS этот блок будет двигаться влево или вправо, переключая слайды.

• Кнопки управления (prev и next): позволяют пользователю переключаться между слайдами вручную.

🖥️ Пример №1: Базовый горизонтальный слайдер с кнопками

Создадим HTML-каркас:

<div class="slider">
  <div class="slides">
    <img src="slide1.jpg" alt="Слайд 1">
    <img src="slide2.jpg" alt="Слайд 2">
    <img src="slide3.jpg" alt="Слайд 3">
  </div>

  <button class="prev">←</button>
  <button class="next">→</button>
</div>

CSS для стилей:

.slider {
  width: 800px;
  overflow: hidden; /* Скрываем лишние слайды */
  position: relative;
  margin: auto;
}

.slides {
  display: flex; /* Располагаем изображения горизонтально */
  transition: transform 0.5s ease; /* Анимация перехода */
}

.slides img {
  width: 800px; /* Ширина каждого слайда равна ширине слайдера */
  flex-shrink: 0; /* Запрещаем сжатие изображений */
}

button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,0.5);
  color: #fff;
  border: none;
  padding: 10px;
  cursor: pointer;
}

.prev { left: 10px; }
.next { right: 10px; }

JavaScript, объяснение логики:

// Получаем элементы DOM
const slides = document.querySelector('.slides');
const images = document.querySelectorAll('.slides img');
const prevBtn = document.querySelector('.prev');
const nextBtn = document.querySelector('.next');

let currentSlide = 0; // Текущий слайд

// Функция переключения слайда
function showSlide(index) {
  if (index < 0) {
    currentSlide = images.length - 1; // Если меньше первого, переходим к последнему
  } else if (index >= images.length) {
    currentSlide = 0; // Если больше последнего, переходим к первому
  } else {
    currentSlide = index;
  }

  // Смещаем контейнер слайдов на нужную позицию
  slides.style.transform = `translateX(-${currentSlide * 800}px)`;
}

// Обработка кликов
prevBtn.addEventListener('click', () => showSlide(currentSlide - 1));
nextBtn.addEventListener('click', () => showSlide(currentSlide + 1));

🎨 Пример №2: Автоматический бесконечный слайдер с fade-эффектом

Этот вариант подходит для баннеров или галерей с плавным переключением.

HTML-код:

<div class="fade-slider">
  <img class="fade-slide active" src="slide1.jpg">
  <img class="fade-slide" src="slide2.jpg">
  <img class="fade-slide" src="slide3.jpg">
</div>

CSS-стили:

.fade-slider {
  position: relative;
  width: 800px;
  height: 500px;
  margin: auto;
}

.fade-slide {
  position: absolute;
  opacity: 0;
  transition: opacity 1s ease;
  width: 100%;
  height: 100%;
}

.fade-slide.active {
  opacity: 1;
}

JavaScript для работы слайдера:

const slidesFade = document.querySelectorAll('.fade-slide');
let currentFade = 0;

function fadeShowSlide() {
  slidesFade.forEach(slide => slide.classList.remove('active')); // Убираем активный класс
  currentFade = (currentFade + 1) % slidesFade.length; // Переходим к следующему слайду
  slidesFade[currentFade].classList.add('active'); // Показываем текущий слайд
}

// Автоматическое переключение каждые 4 секунды
setInterval(fadeShowSlide, 4000);

📱 Пример №3: Адаптивный слайдер с поддержкой мобильных свайпов

Этот слайдер можно переключать свайпами на мобильных устройствах.

Общий JS-принцип для реализации свайпов:

const slider = document.querySelector('.slides');
let startX = 0;
let endX = 0;

slider.addEventListener('touchstart', e => {
  startX = e.touches[0].clientX;
});

slider.addEventListener('touchmove', e => {
  endX = e.touches[0].clientX;
});

slider.addEventListener('touchend', () => {
  if (startX - endX > 50) {
    showSlide(currentSlide + 1); // свайп влево
  }
  if (endX - startX > 50) {
    showSlide(currentSlide - 1); // свайп вправо
  }
});

🎯 Хотите ещё больше прокачать навыки JavaScript?

Начните обучение программированию вместе с приложением Кодик! 👨‍💻
Кодик — это удобное приложение, которое поможет вам легко освоить JavaScript и другие технологии с помощью интерактивных уроков и интересных задач.