Как сделать простой слайдер на HTML и JavaScript

Если вы учитесь на фронтэнда, то время от времени вам желательно делать простые проекты – они и помогут закреплять знания на практике, и дадут мотивацию к дальнейшему обучению. Один из самых простых проектов, который вы можете сделать самостоятельно почти со старта – простой слайдер на HTML/JS. Ниже – код такого слайдера с разбором, возможные улучшения и готовые библиотеки для создания слайдеров.

HTML

CSS

JavaScript

Улучшения

Библиотеки

Вывод

HTML

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

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Simple Slider</title>
 <link rel="stylesheet" href="styles.css">
</head>
<body>
 <div class="slider">
 <div class="slides">
 <div class="slide"><img src="image1.jpg" alt="Image 1"></div>
 <div class="slide"><img src="image2.jpg" alt="Image 2"></div>
 <div class="slide"><img src="image3.jpg" alt="Image 3"></div>
 </div>
 <button class="prev" onclick="prevSlide()">&#10094;</button>
 <button class="next" onclick="nextSlide()">&#10095;</button>
 </div>
 <script src="script.js"></script>
</body>
</html>

Наш слайдер будет размещен в контейнере «slider». Внутри контейнера – сам слайдер как отдельный блок и две кнопки, переключающие изображения. Слайды мы помещаем в контейнере «slides», каждый слайд нужно отдельно прописывать через тег img.

CSS

Добавим немного стиля:

body {
 font-family: Arial, sans-serif;
 display: flex;
 justify-content: center;
 align-items: center;
 height: 100vh;
 margin: 0;
 background-color: #f0f0f0;
}
.slider {
 position: relative;
 width: 80%;
 max-width: 600px;
 overflow: hidden;
 border: 2px solid #ddd;
 border-radius: 10px;
 background-color: #fff;
}
.slides {
 display: flex;
 transition: transform 0.5s ease-in-out;
}
.slide {
 min-width: 100%;
 box-sizing: border-box;
}
.slide img {
 width: 100%;
 display: block;
}
button {
 position: absolute;
 top: 50%;
 transform: translateY(-50%);
 background-color: rgba(0, 0, 0, 0.5);
 color: #fff;
 border: none;
 padding: 10px;
 cursor: pointer;
 border-radius: 50%;
}
button.prev {
 left: 10px;
}
button.next {
 right: 10px;
}

Здесь переходы реализованы через свойство transition – можно сделать их средствами JS, но это будет ощутимо сложнее. При желании вы можете поиграть со стилем и создать что-то свое.

JavaScript

А теперь – к самому главному:

let currentSlide = 0;
function showSlide(index) {
 const slides = document.querySelectorAll('.slide');
 if (index >= slides.length) {
 currentSlide = 0;
 } else if (index < 0) {
 currentSlide = slides.length - 1;
 } else {
 currentSlide = index;
 }
 const offset = -currentSlide * 100;
 document.querySelector('.slides').style.transform = `translateX(${offset}%)`;
}
function nextSlide() {
 showSlide(currentSlide + 1);
}
function prevSlide() {
 showSlide(currentSlide - 1);
}
document.addEventListener('DOMContentLoaded', () => {
 showSlide(currentSlide);
});

Сначала мы инициализируем скрипт – создаем переменную currentSlide, которой передаем индекс первого слайда (0). Затем мы создаем 3 функции: showSlide(), которая принимает индекс слайда и показывает его; nextSlide() и prevSlide(), которые под капотом просто запускают showSlide() с нужным индексом. nextSlide() и prevSlide() привязаны к кнопкам по onclick(). В showSlide() мы сначала формируем массив всех слайдов по селектору «.slide», после чего реализуем закольцованность слайдера: если индекс больше длины массива, то переходим на первый слайд; если индекс меньше нуля, то переходим на последний слайд. Дальше мы создаем оффсет – константу, в которой хранится нужное нам смещение в процентах. После этого мы просто смещаем все элементы через translateX.

В результате получаем такой слайдер:

Улучшения

Мы уже сделали одно улучшение – добавили анимацию перехода через CSS. Что еще можно сделать:

Автоматическое переключение слайдов по тайм-ауту. В скрипте нужно создать таймер и передать ему вызов функции переключения слайдов: let slideInterval = setInterval(nextSlide, 3000) // 3 секунды.
Добавить точки для навигации по слайдеру. В HTML нам нужно будет добавить в блоке слайдера новый блок – «div class="indicators"», в котором мы для каждой картинки вручную будем прописывать точку и вызывать функцию вызова showSlide с номером слайда, ассоциированным с точкой: «span class="dot" onclick="showSlide(0)"». Если хотите, чтобы точка с выбранным слайдом выделялась – нужно задать стиль выделения в CSS, после чего в скрипте создать функцию «updateDots()», которая будет брать все точки по «querySelectorAll» и обновлять их вид. Эту функцию нужно вызывать как при загрузке документа, так и при каждом вызове showSlide.

Библиотеки

Естественно, функционал создания слайдеров уже реализован во многих библиотеках. Приведем 3 примера с кратким описанием:

SwiperJS. Мощный и отлично оптимизирован для мобильных устройств. Из минусов – библиотека весит 40 Кб, довольно много для слайдера.
SplideJS. Простой, без дополнительных зависимостей, мало весит. Хорошо адаптирован для мобильных устройств.
GlideJS. Довольно старая библиотека с кучей готовых решений. Отлично оптимизирован под десктоп, плохо оптимизирован под мобильные устройства – при переходе игнорирует инпут от пользователя.

Вывод

Тезисно:

Для того, чтобы создать простой слайдер, вам нужны 3 файла: HTML, CSS, JS.
В HTML создаете div и помещаете в него слайды, в CSS прописываете стили, в JS прописываете логику смены картинки через офсет.
Слайдер можно улучшить – добавить точки навигации, например.
Есть много библиотек, с помощью можно создать готовые красивые слайдеры, но учтите – эти библиотеки имеют вес, и вам придется с этим что-то делать.

Сравни.руОнлайн курсыПутеводительКак сделать простой слайдер на HTML и JavaScript