Статья

Foops Сегодня 15:29

Как сделать слайдер изображений своими руками 🎞️

Оглавление

Слайдер — это классический элемент любого сайта: показываем несколько картинок, новости или акции на ограниченном пространстве. Многие сразу думают «нужен плагин», но на самом деле можно сделать простой слайдер с нуля на HTML, CSS и JS.

1. Основная структура HTML

<div class="slider">
  <div class="slides">
    <img src="img1.jpg" alt="Картинка 1">
    <img src="img2.jpg" alt="Картинка 2">
    <img src="img3.jpg" alt="Картинка 3">
  </div>
  <button class="prev">&#10094;</button>
  <button class="next">&#10095;</button>
</div>

📌 Компоненты:

.slider — контейнер всего слайдера.
.slides — блок с картинками.
button.prev и button.next — стрелки для навигации.

2. Базовый CSS

Сначала делаем так, чтобы картинки располагались горизонтально и прятались лишние:

.slider {
  position: relative;
  width: 600px;
  height: 400px;
  overflow: hidden;
  margin: auto;
  border: 2px solid #ddd;
  border-radius: 8px;
}

.slides {
  display: flex;
  width: 100%;
  height: 100%;
  transition: transform 0.5s ease;
}

.slides img {
  width: 100%;
  flex-shrink: 0;
}

📌 display:flex позволяет выстроить все картинки в ряд, а overflow:hidden скрывает все, что не помещается в контейнер.

3. Стрелки навигации

.slider button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,0.5);
  border: none;
  color: white;
  font-size: 30px;
  padding: 10px;
  cursor: pointer;
  border-radius: 50%;
}

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

.slider button:hover {
  background: rgba(0,0,0,0.8);
}

🎯 Простые стрелки, которые видны поверх слайдера и реагируют на наведение.

4. JS для переключения

Нам нужна переменная, которая хранит текущий слайд и функция, которая будет смещать .slides:

const slides = document.querySelector('.slides');
const images = document.querySelectorAll('.slides img');
const prev = document.querySelector('.prev');
const next = document.querySelector('.next');

let index = 0;

function showSlide(i) {
  if (i < 0) index = images.length - 1;
  else if (i >= images.length) index = 0;
  else index = i;

  slides.style.transform = `translateX(${-index * 100}%)`;
}

prev.addEventListener('click', () => {
  showSlide(index - 1);
});

next.addEventListener('click', () => {
  showSlide(index + 1);
});

📌 Суть: сдвигаем .slides по горизонтали на -index * 100%.

5. Автопрокрутка

Если хочется, чтобы слайды менялись сами:

setInterval(() => {
  showSlide(index + 1);
}, 3000); // каждые 3 секунды

Можно комбинировать: автопрокрутка + кнопки.

6. Индикаторы (точки под слайдером)

HTML:

<div class="dots">
  <span class="dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>
</div>

CSS:

.dots {
  text-align: center;
  margin-top: 10px;
}

.dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  background: #bbb;
  border-radius: 50%;
  margin: 0 5px;
  cursor: pointer;
  transition: background 0.3s;
}

.dot.active {
  background: #717171;
}

JS:

const dots = document.querySelectorAll('.dot');

function updateDots() {
  dots.forEach(dot => dot.classList.remove('active'));
  dots[index].classList.add('active');
}

dots.forEach((dot, i) => {
  dot.addEventListener('click', () => {
    showSlide(i);
    updateDots();
  });
});

Не забудь вызывать updateDots() в showSlide():

function showSlide(i) {
  if (i < 0) index = images.length - 1;
  else if (i >= images.length) index = 0;
  else index = i;

  slides.style.transform = `translateX(${-index * 100}%)`;
  updateDots();
}

7. Бесконечный цикл с клонами (опционально)

Для плавного бесконечного движения можно добавить клонированные слайды в начало и конец.

Это чуть сложнее, но визуально выглядит идеально без рывков.

8. Адаптивный слайдер

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

.slider {
  width: 90%;
  max-width: 800px;
  height: 50vw; /* высота зависит от ширины */
}

.slides img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

Теперь слайдер будет красиво смотреться на мобильных и десктопах.

9. Слайдер с переходами fade (не сдвиг)

Иногда хочется, чтобы слайды плавно менялись друг на друга:

HTML и CSS:

.slides img {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  transition: opacity 0.5s;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.slides img.active {
  opacity: 1;
  z-index: 1;
}

JS:

function showSlide(i) {
  images.forEach(img => img.classList.remove('active'));
  index = (i + images.length) % images.length;
  images[index].classList.add('active');
  updateDots();
}

💡 Красиво для лендингов и презентаций.

10. Управление с клавиатуры

document.addEventListener('keydown', function(e) {
  if (e.key === 'ArrowLeft') showSlide(index - 1);
  if (e.key === 'ArrowRight') showSlide(index + 1);
});

Пользователи могут переключать слайды стрелками на клавиатуре.

11. Жесты для мобильных устройств (swipe)

Для простого свайпа можно использовать события touchstart и touchend:

let startX = 0;

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

slides.addEventListener('touchend', e => {
  let endX = e.changedTouches[0].clientX;
  if (startX - endX > 50) showSlide(index + 1);
  if (endX - startX > 50) showSlide(index - 1);
});

12. Прелоад картинок

Чтобы слайды не «мигали» при загрузке:

images.forEach(img => {
  const newImg = new Image();
  newImg.src = img.src;
});

Все изображения заранее загружаются в память.

13. Слайдер с разной скоростью анимации

Можно менять transition для разных эффектов:

.slides {
  transition: transform 0.7s ease-in-out;
}

Или для fade:

.slides img {
  transition: opacity 1s ease;
}

14. Слайдер с текстом или кнопкой на каждом слайде

HTML:

<div class="slide-content">
  <h2>Заголовок</h2>
  <p>Описание слайда</p>
  <button>Подробнее</button>
</div>

CSS:

.slide-content {
  position: absolute;
  bottom: 20px;
  left: 20px;
  color: white;
  background: rgba(0,0,0,0.4);
  padding: 10px;
  border-radius: 5px;
}

JS при fade-слайдере всё работает автоматически, просто ставим .slide-content внутри <div class="slides">.

15. Итог

Создать слайдер можно без плагинов. Главное — понять:

контейнер слайдов и overflow,
смещение с помощью transform: translateX,
плавность через transition,
навигация через кнопки, точки или свайпы,
автопрокрутка — по желанию

Слайдер своими руками проще, чем кажется, и он даёт полный контроль над стилем и поведением.

Можно добавить fade, текст, кнопки, стрелки, анимации появления — и всё это без тяжёлых библиотек.

🎬 С таким подходом слайдер будет лёгким, адаптивным и полностью на твоём контроле.

Разработка

+ Читать