Rivalry2

HTML Diff

1 added 1 removed

Original 2026-01-01

Modified 2026-02-21

1 <p><a>#статьи</a></p>

2 <ul><li>2 апр 2025</li>

3 <li>0</li>

4 </ul><p>Показываем, как сделать собственную галерею на веб-странице.</p>

5 <p>Иллюстрация: Оля Ежак для Skillbox Media</p>

6 <p>Филолог и технарь, пишет об IT так, что поймут даже новички. Коммерческий редактор, автор технических статей для vc.ru и "Хабра".</p>

7 <p>Если изображения или баннеры не помещаются на экране, можно использовать слайдер: он группирует элементы и позволяет пользователю перелистывать их по горизонтали. В этой статье рассказываем, как создать собственный слайдер с помощью HTML, CSS и JavaScript и встроить его на сайт.</p>

8 <p><strong>Содержание</strong></p>

9 <ul><li><a>Что такое слайдер</a></li>

10 <li><a>Разрабатываем собственный слайдер</a></li>

11 <li><a>Библиотеки для создания слайдеров</a></li>

12 </ul><p><strong>Слайдер</strong> - интерактивный элемент на веб-странице, с помощью которого можно компактно представить несколько блоков контента в одной области экрана. Слайдер чаще всего используют для компоновки изображений и рекламных баннеров.</p>

13 <p>Представьте, что вам надо разместить на одной странице сразу четыре изображения. Можно расположить картинки друг под другом, но в таком случае объекты будут занимать много места. Для экономии пространства на странице лучше использовать слайдер: он соберёт все элементы в галерею, чтобы страница выглядела аккуратней.</p>

14 <p>Слайдер состоит из изображений, кнопок управления и блока с подписью. В любой момент в слайдере видно только одну картинку, а для перехода к следующей надо нажать на кнопку. Если слайдер на сайте используют для показа рекламы, то разработчики добавляют автоматическое переключение слайдов.</p>

15 <p>Например, вот так выглядит слайдер на сайте Skillbox Media:</p>

16 <em>Изображение: DALL-E / Skillbox Media</em><em>Изображение: DALL-E / Skillbox Media</em><em>Изображение: DALL-E / Skillbox Media</em><p>На главной странице Amazon слайдер используют для автоматического пролистывания рекламных баннеров:</p>

17 Слайдер рекламных баннеров на главной странице Amazon<em>Скриншот:<a>Amazon</a>/ Skillbox Media</em><p>Иногда веб-дизайнеры стилизуют слайдеры, добавляют к ним необычные эффекты и анимации. Например, на <a>сайте</a>композитора Алана Менкена, который пишет музыку для мультфильмов Disney, собраны все его работы. При этом их скомпоновали с помощью слайдера и добавили музыку и видео:</p>

18 Каждый слайд оживает, когда пользователь выбирает его<em>Скриншот:<a>Alan Menken</a>/ Skillbox Media</em><p>Слайдер можно реализовать без помощи сторонних библиотек, а для самых простых вариантов не потребуется даже<a>JavaScript</a>. В этой статье мы разработаем слайдер на <a>HTML</a>и <a>CSS</a>, посмотрим, как он работает, и шаг за шагом будем его улучшать. Сперва добавим скрипт на JavaScript, а потом настроим автоматическую прокрутку и адаптируем проект под мобильные устройства.</p>

19 <p>Мы предполагаем, что вы уже умеете верстать веб-страницы и знаете, как HTML, CSS и JavaScript работают друг с другом. Если нет - рекомендуем начать с изучения руководства по вёрстке для начинающих.</p>

20 <p>Для начала нам нужна структура проекта, поэтому создадим папку в любом месте компьютера и разместим в ней файл index.html. Добавим в него базовую разметку веб-страниц:</p>

21 <!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Слайдер</title> <style> /* Стили слайдера */ </style> </head> <body>  </body> </html><p>В больших проектах вёрстку, стили и скрипты разделяют на отдельные файлы, чтобы было удобно работать с тысячами строк кода. У нас проект компактный, поэтому мы можем позволить себе писать всё в одном HTML-файле. Разметку веб-страницы будем задавать внутри парного тега <body>, а CSS-стили - внутри <style>.</p>

22 <p>Структура проекта готова, теперь можно переходить к вёрстке. В блоке <body> пропишем основные элементы слайдера, включая радиокнопки type="radio", слайды и индикатор выбранного слайда <label>. Картинки, которые вы используете в проекте, должны находиться в той же папке, что и HTML-файл:</p>

23 <body>  <div class="slider">  <input type="radio" name="slider" id="slide1" checked>  <input type="radio" name="slider" id="slide2"> <input type="radio" name="slider" id="slide3">  <div class="slides"> <div class="slide"><img src="Slide1.webp" width="300"></div> <div class="slide"><img src="Slide2.webp" width="300"></div> <div class="slide"><img src="Slide3.webp" width="300"></div> </div>  <div class="controls"> <label for="slide1"></label> <label for="slide2"></label> <label for="slide3"></label> </div> </div> </body><p>Если запустить код в браузере, то на странице нас встретит конструкция, слабо похожая на слайдер: все картинки друг над другом, а радиокнопки ничего не переключают. Всё из-за того, что мы ещё не добавили CSS-стили.</p>

24 Пока наш элемент не похож на слайдер, но всё ещё впереди<em>Скриншот: Skillbox Media</em><p>В блоке <style> пропишем стили: разместим изображения по горизонтали и создадим контейнер такого размера, чтобы было видно только одну картинку. Для плавной анимации применим функцию transform:</p>

25 <style> /* Контейнер слайдера */ .slider { width: 300px; /* Фиксированная ширина */ overflow: hidden; /* Скрываем выходящие за границы изображения */ position: relative; } /* Контейнер, в котором будут находиться все слайды */ .slides { display: flex; /* Располагаем слайды в ряд */ width: 300%; /* Делаем ширину в три раза больше (по количеству слайдов) */ transition: transform 0.5s ease-in-out; /* Плавное переключение слайдов */ } /* Каждый отдельный слайд */ .slide { width: 100%; /* Каждый слайд занимает всю ширину контейнера */ flex-shrink: 0; /* Запрещаем уменьшение элементов внутри flex-контейнера */ } /* Убираем отображение радиокнопок, они нужны только для управления */ input[type="radio"] { display: none; } /* Переключение слайдов при выборе радиокнопки */ #slide1:checked ~ .slides { transform: translateX(0%); } /* Первый слайд */ #slide2:checked ~ .slides { transform: translateX(-100%); } /* Второй слайд */ #slide3:checked ~ .slides { transform: translateX(-200%); } /* Третий слайд */ /* Контейнер для точек управления (индикаторов) */ .controls { text-align: center; /* Размещаем точки по центру */ margin-top: 10px; /* Добавляем отступ сверху */ } /* Стиль для точек переключения */ .controls label { display: inline-block; /* Размещаем точки в строку */ width: 15px; /* Размер точки */ height: 15px; background: gray; /* Серый цвет точки */ border-radius: 50%; /* Делаем точки круглыми */ margin: 5px; /* Добавляем небольшой отступ между ними */ cursor: pointer; /* Делаем курсор в виде руки при наведении */ } /* Меняем цвет активной точки при выборе слайда */ input:checked + label { background: black; } </style><p>Если запустить код сейчас, то на странице уже появится слайдер с переключателями в виде точек. Если выбрать одну из точек, то код моментально выведет нужную картинку:</p>

26 <p>Мы загрузили код проекта в CodePen, чтобы вы могли посмотреть на результат работы кода прямо в браузере. Переходите<a>по ссылке</a>, чтобы детально изучить проект.</p>

27 <p><strong>Код слайдера полностью ↓</strong></p>

28 <!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Слайдер</title> <style> /* Контейнер слайдера */ .slider { width: 300px; /* Фиксированная ширина */ overflow: hidden; /* Скрываем выходящие за границы изображения */ position: relative; } /* Контейнер, в котором будут находиться все слайды */ .slides { display: flex; /* Располагаем слайды в ряд */ width: 300%; /* Делаем ширину в три раза больше (по количеству слайдов) */ transition: transform 0.5s ease-in-out; /* Плавное переключение слайдов */ } /* Каждый отдельный слайд */ .slide { width: 100%; /* Каждый слайд занимает всю ширину контейнера */ flex-shrink: 0; /* Запрещаем уменьшение элементов внутри flex-контейнера */ } /* Убираем отображение радиокнопок, они нужны только для управления */ input[type="radio"] { display: none; } /* Переключение слайдов при выборе радиокнопки */ #slide1:checked ~ .slides { transform: translateX(0%); } /* Первый слайд */ #slide2:checked ~ .slides { transform: translateX(-100%); } /* Второй слайд */ #slide3:checked ~ .slides { transform: translateX(-200%); } /* Третий слайд */ /* Контейнер для точек управления (индикаторов) */ .controls { text-align: center; /* Размещаем точки по центру */ margin-top: 10px; /* Добавляем отступ сверху */ } /* Стиль для точек переключения */ .controls label { display: inline-block; /* Размещаем точки в строку */ width: 15px; /* Размер точки */ height: 15px; background: gray; /* Серый цвет точки */ border-radius: 50%; /* Делаем точки круглыми */ margin: 5px; /* Добавляем небольшой отступ между ними */ cursor: pointer; /* Делаем курсор в виде руки при наведении */ } /* Меняем цвет активной точки при выборе слайда */ input:checked + label { background: black; } </style> </head> <body>  <div class="slider">  <input type="radio" name="slider" id="slide1" checked>  <input type="radio" name="slider" id="slide2"> <input type="radio" name="slider" id="slide3">  <div class="slides"> <div class="slide"><img src="Slide1.webp" width="300"></div> <div class="slide"><img src="Slide2.webp" width="300"></div> <div class="slide"><img src="Slide3.webp" width="300"></div> </div>  <div class="controls"> <label for="slide1"></label> <label for="slide2"></label> <label for="slide3"></label> </div> </div> </body> </html><p>Базовый слайдер готов, и можно начать его улучшать. На первом этапе добавим в проект JavaScript и избавимся от реализации логики переключения слайдов на CSS. Это даст нам больше возможностей для кастомизации, например мы сможем настроить автоматическую смену изображений.</p>

29 <p>Также, если внимательно посмотреть на код нашего слайдера, можно заметить в нём некоторые проблемы. Например, количество радиокнопок жёстко привязано к количеству слайдов. Если добавить ещё одно изображение в слайдер, то придётся переписать практически весь проект. Эту проблему тоже решим с помощью JavaScript и сделаем так, чтобы можно было добавлять в слайдер сколько угодно картинок.</p>

30 <p>Перепишем код нашего слайдера. В HTML-разметке заменим радиокнопки на обычные. Сами слайды оставим:</p>

31 <body> <div class="slider">  <div class="slides"> <div class="slide"><img src="Slide1.webp"></div> <div class="slide"><img src="Slide2.webp"></div> <div class="slide"><img src="Slide3.webp"></div> </div>  <button class="prev">&#10094;</button>  <button class="next">&#10095;</button>  </div> </body><p>В CSS-стилях зададим оформление кнопок и уберём часть кода, которая отвечает за переключение слайдов - эту задачу доверим JavaScript:</p>

32 <style> /* Основной контейнер слайдера */ /* Основной контейнер слайдера */ .slider { width: 300px; /* Фиксированная ширина слайдера */ overflow: hidden; /* Обрезаем всё, что выходит за границы контейнера */ position: relative; /* Необходимо для правильного позиционирования кнопок */ } /* Контейнер всех слайдов */ .slides { display: flex; /* Размещаем слайды в одну линию */ transition: transform 0.5s ease-in-out; /* Анимация плавного смещения */ } /* Каждый отдельный слайд */ .slide { width: 100%; /* Занимает всю ширину контейнера */ flex-shrink: 0; /* Запрещаем уменьшение размера слайдов */ } /* Стили для изображений */ .slide img { width: 100%; /* Картинки растягиваются на весь слайд */ display: block; /* Убираем пробелы вокруг изображений */ } /* Кнопки "Назад" и "Вперёд" */ .prev, .next { position: absolute; /* Позволяет располагать кнопки поверх слайдов */ top: 50%; /* Размещаем по вертикали по центру */ transform: translateY(-50%); /* Сдвигаем кнопки вверх на половину их высоты */ background: rgba(0, 0, 0, 0.5); /* Полупрозрачный фон кнопок */ color: white; /* Белый цвет текста */ border: none; /* Убираем границы */ padding: 10px; /* Отступы внутри кнопки */ cursor: pointer; /* Изменяем курсор на указатель */ font-size: 18px; /* Размер шрифта */ font-weight: bold; /* Делаем текст жирным */ z-index: 2; /* Размещаем кнопки выше всех элементов */ } /* Позиционируем кнопку "Назад" слева */ .prev { left: 10px; } /* Позиционируем кнопку "Вперёд" справа */ .next { right: 10px; } </style><p>Оживим код с помощью JavaScript. Добавим функцию goToSlide для смены слайдов и обработчики addEventListener для кнопок переключения:</p>

33 <script> // Находим контейнер со слайдами const slides = document.querySelector('.slides'); // Определяем количество слайдов const slideCount = document.querySelectorAll('.slide').length; // Находим кнопки "Назад" и "Вперёд" const prevButton = document.querySelector('.prev'); const nextButton = document.querySelector('.next'); let currentIndex = 0; // Переменная для хранения текущего слайда // Функция смены слайдов function goToSlide(index) { if (index < 0) { index = slideCount - 1; // Если нажали "Назад" на первом слайде, переходим на последний } else if (index >= slideCount) { index = 0; // Если нажали "Вперёд" на последнем слайде, переходим на первый } currentIndex = index; // Запоминаем текущий слайд slides.style.transform = `translateX(${-index * 100}%)`; // Сдвигаем контейнер со слайдами } // Добавляем обработчик клика для кнопки "Назад" prevButton.addEventListener('click', () => { goToSlide(currentIndex - 1); }); // Добавляем обработчик клика для кнопки "Вперёд" nextButton.addEventListener('click', () => { goToSlide(currentIndex + 1); }); // Устанавливаем первый активный слайд при загрузке страницы goToSlide(0); </script><p>Теперь переключать картинки можно с помощью обычных кнопок, а сам слайдер вмещает в себя сколько угодно картинок:</p>

34 <p>Слайдер с JavaScript<a>доступен</a>на CodePen.</p>

35 <p><strong>Код слайдера полностью ↓</strong></p>

36 <!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Слайдер</title> <style> /* Основной контейнер слайдера */ .slider { width: 300px; /* Фиксированная ширина слайдера */ overflow: hidden; /* Обрезаем всё, что выходит за границы контейнера */ position: relative; /* Необходимо для правильного позиционирования кнопок */ } /* Контейнер всех слайдов */ .slides { display: flex; /* Размещаем слайды в одну линию */ transition: transform 0.5s ease-in-out; /* Анимация плавного смещения */ } /* Каждый отдельный слайд */ .slide { width: 100%; /* Занимает всю ширину контейнера */ flex-shrink: 0; /* Запрещаем уменьшение размера слайдов */ } /* Стили для изображений */ .slide img { width: 100%; /* Картинки растягиваются на весь слайд */ display: block; /* Убираем пробелы вокруг изображений */ } /* Кнопки "Назад" и "Вперёд" */ .prev, .next { position: absolute; /* Позволяет располагать кнопки поверх слайдов */ top: 50%; /* Размещаем по вертикали по центру */ transform: translateY(-50%); /* Сдвигаем кнопки вверх на половину их высоты */ background: rgba(0, 0, 0, 0.5); /* Полупрозрачный фон кнопок */ color: white; /* Белый цвет текста */ border: none; /* Убираем границы */ padding: 10px; /* Отступы внутри кнопки */ cursor: pointer; /* Изменяем курсор на указатель */ font-size: 18px; /* Размер шрифта */ font-weight: bold; /* Делаем текст жирным */ z-index: 2; /* Размещаем кнопки выше всех элементов */ } /* Позиционируем кнопку "Назад" слева */ .prev { left: 10px; } /* Позиционируем кнопку "Вперёд" справа */ .next { right: 10px; } </style> </head> <body>  <div class="slider">  <div class="slides"> <div class="slide"><img src="Slide1.webp"></div> <div class="slide"><img src="Slide2.webp"></div> <div class="slide"><img src="Slide3.webp"></div> </div>  <button class="prev">&#10094;</button>  <button class="next">&#10095;</button>  </div> <script> // Находим контейнер со слайдами const slides = document.querySelector('.slides'); // Определяем количество слайдов const slideCount = document.querySelectorAll('.slide').length; // Находим кнопки "Назад" и "Вперёд" const prevButton = document.querySelector('.prev'); const nextButton = document.querySelector('.next'); let currentIndex = 0; // Переменная для хранения текущего слайда // Функция смены слайдов function goToSlide(index) { if (index < 0) { index = slideCount - 1; // Если нажали "Назад" на первом слайде, переходим на последний } else if (index >= slideCount) { index = 0; // Если нажали Вперёд" на последнем слайде, переходим на первый } currentIndex = index; // Запоминаем текущий слайд slides.style.transform = `translateX(${-index * 100}%)`; // Сдвигаем контейнер со слайдами } // Добавляем обработчик клика для кнопки "Назад" prevButton.addEventListener('click', () => { goToSlide(currentIndex - 1); }); // Добавляем обработчик клика для кнопки "Вперёд" nextButton.addEventListener('click', () => { goToSlide(currentIndex + 1); }); // Устанавливаем первый активный слайд при загрузке страницы goToSlide(0); </script> </body> </html><p>К каждой картинке в слайдере добавим подпись. Так пользователю будет понятен контекст слайда, а если вы используете чужие изображения, то вместо подписи можно разместить ссылку на автора.</p>

37 <p>Ещё реализуем функцию автоматической прокрутки слайдов. Сделаем так, чтобы картинки менялись по кругу до тех пор, пока пользователь не наведёт на слайдер курсор.</p>

38 <p>Сперва отредактируем HTML-файл, добавив описание к каждому слайду:</p>

39 <body>  <div class="slider">  <div class="slides"> <div class="slide"> <img src="Slide1.webp"> <div class="caption">Описание слайда 1</div>  </div> <div class="slide"> <img src="Slide2.webp"> <div class="caption">Описание слайда 2</div>  </div> <div class="slide"> <img src="Slide3.webp"> <div class="caption">Описание слайда 3</div>  </div> </div>  <button class="prev">&#10094;</button>  <button class="next">&#10095;</button>  </div> </body><p>Подписи добавили, значит, теперь их надо стилизовать. Для этого в блоке <style> пропишем все параметры текста и разместим его поверх изображений:</p>

40 <style> /* Подпись к слайду */ .caption { position: absolute; /* Размещаем поверх изображения */ bottom: 10px; /* Отступ от нижнего края */ left: 50%; /* Выравниваем по центру */ transform: translateX(-50%); /* Центрируем по горизонтали */ background: rgba(0, 0, 0, 0.6); /* Полупрозрачный тёмный фон для читаемости */ color: white; /* Белый текст */ padding: 5px 10px; /* Внутренние отступы */ font-size: 14px; /* Размер шрифта */ border-radius: 5px; /* Закругляем углы */ } } </style><p>Теперь перепишем код в блоке <script>: добавим функцию автоматической прокрутки, которая будет останавливаться при наведении курсора на слайдер.</p>

41 <script> // Находим контейнер со слайдами const slides = document.querySelector('.slides'); // Определяем количество слайдов const slideCount = document.querySelectorAll('.slide').length; // Находим кнопки "Назад" и "Вперёд" const prevButton = document.querySelector('.prev'); const nextButton = document.querySelector('.next'); // Находим сам слайдер (нужен для остановки автопрокрутки при наведении) const slider = document.querySelector('.slider'); let currentIndex = 0; // Переменная для хранения текущего индекса слайда let autoPlayInterval; // Переменная для хранения интервала автопрокрутки /** * Функция для смены слайдов * @param {number} index - индекс слайда, на который нужно перейти */ function goToSlide(index) { if (index < 0) { index = slideCount - 1; // Если текущий слайд первый, переходим на последний } else if (index >= slideCount) { index = 0; // Если текущий слайд последний, переходим на первый } currentIndex = index; // Запоминаем текущий индекс slides.style.transform = `translateX(${-index * 100}%)`; // Смещаем контейнер слайдов } // Добавляем обработчик клика для кнопки "Назад" prevButton.addEventListener('click', () => { goToSlide(currentIndex - 1); }); // Добавляем обработчик клика для кнопки "Вперёд" nextButton.addEventListener('click', () => { goToSlide(currentIndex + 1); }); /** * Функция запуска автоматического перелистывания слайдов * Устанавливает интервал на три секунды */ function startAutoPlay() { autoPlayInterval = setInterval(() => { goToSlide(currentIndex + 1); }, 3000); } /** * Функция остановки автопрокрутки * Останавливает заданный ранее интервал */ function stopAutoPlay() { clearInterval(autoPlayInterval); } // Запускаем автопрокрутку при загрузке страницы startAutoPlay(); // Останавливаем автопрокрутку, если пользователь навёл курсор на слайдер slider.addEventListener('mouseenter', stopAutoPlay); // Возобновляем автопрокрутку, когда пользователь убирает курсор slider.addEventListener('mouseleave', startAutoPlay); </script><p>Слайдер с подписями и автоматической прокруткой<a>доступен</a>на CodePen.</p>

42 <p><strong>Код слайдера полностью ↓</strong></p>

43 <!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Слайдер</title> <style> /* Основной контейнер слайдера */ .slider { width: 300px; /* Фиксированная ширина слайдера */ overflow: hidden; /* Обрезаем всё, что выходит за границы контейнера */ position: relative; /* Позволяет корректно позиционировать кнопки */ text-align: center; /* Центрируем текст внутри */ } /* Контейнер всех слайдов */ .slides { display: flex; /* Размещаем слайды в одну линию */ transition: transform 0.5s ease-in-out; /* Плавная анимация при смене слайдов */ } /* Каждый отдельный слайд */ .slide { width: 100%; /* Слайды занимают всю ширину контейнера */ flex-shrink: 0; /* Запрещаем уменьшение размера слайдов */ position: relative; /* Позволяет позиционировать подписи внутри слайдов */ } /* Стили для изображений */ .slide img { width: 100%; /* Картинка растягивается на всю ширину слайда */ display: block; /* Убираем возможные пробелы вокруг изображений */ } /* Подпись к слайду */ .caption { position: absolute; /* Размещаем поверх изображения */ bottom: 10px; /* Отступ от нижнего края */ left: 50%; /* Выравниваем по центру */ transform: translateX(-50%); /* Центрируем по горизонтали */ background: rgba(0, 0, 0, 0.6); /* Полупрозрачный тёмный фон для читаемости */ color: white; /* Белый текст */ padding: 5px 10px; /* Внутренние отступы */ font-size: 14px; /* Размер шрифта */ border-radius: 5px; /* Закругляем углы */ } /* Кнопки "Назад" и "Вперёд" */ .prev, .next { position: absolute; /* Позволяет разместить поверх слайдов */ top: 50%; /* Размещаем по центру вертикали */ transform: translateY(-50%); /* Смещаем вверх на 50% высоты кнопки */ background: rgba(0, 0, 0, 0.5); /* Полупрозрачный фон */ color: white; /* Белый текст */ border: none; /* Убираем границы */ padding: 10px; /* Внутренние отступы */ cursor: pointer; /* Изменяем курсор на указатель */ font-size: 18px; /* Размер шрифта */ font-weight: bold; /* Делаем текст жирным */ z-index: 2; /* Размещаем кнопки выше всех элементов */ } /* Позиционируем кнопку "Назад" слева */ .prev { left: 10px; } /* Позиционируем кнопку "Вперёд" справа */ .next { right: 10px; } </style> </head> <body>  <div class="slider">  <div class="slides"> <div class="slide"> <img src="Slide1.webp"> <div class="caption">Описание слайда 1</div>  </div> <div class="slide"> <img src="Slide2.webp"> <div class="caption">Описание слайда 2</div>  </div> <div class="slide"> <img src="Slide3.webp"> <div class="caption">Описание слайда 3</div>  </div> </div>  <button class="prev">&#10094;</button>  <button class="next">&#10095;</button>  </div> <script> // Находим контейнер со слайдами const slides = document.querySelector('.slides'); // Определяем количество слайдов const slideCount = document.querySelectorAll('.slide').length; // Находим кнопки "Назад" и "Вперёд" const prevButton = document.querySelector('.prev'); const nextButton = document.querySelector('.next'); // Находим сам слайдер (нужен для остановки автопрокрутки при наведении) const slider = document.querySelector('.slider'); let currentIndex = 0; // Переменная для хранения текущего индекса слайда let autoPlayInterval; // Переменная для хранения интервала автопрокрутки /** * Функция для смены слайдов * @param {number} index - индекс слайда, на который нужно перейти */ function goToSlide(index) { if (index < 0) { index = slideCount - 1; // Если текущий слайд первый, переходим на последний } else if (index >= slideCount) { index = 0; // Если текущий слайд последний, переходим на первый } currentIndex = index; // Запоминаем текущий индекс slides.style.transform = `translateX(${-index * 100}%)`; // Смещаем контейнер слайдов } // Добавляем обработчик клика для кнопки "Назад" prevButton.addEventListener('click', () => { goToSlide(currentIndex - 1); }); // Добавляем обработчик клика для кнопки "Вперёд" nextButton.addEventListener('click', () => { goToSlide(currentIndex + 1); }); /** * Функция запуска автоматического перелистывания слайдов. * Устанавливает интервал на три секунды. */ function startAutoPlay() { autoPlayInterval = setInterval(() => { goToSlide(currentIndex + 1); }, 3000); } /** * Функция остановки автопрокрутки. * Останавливает заданный ранее интервал. */ function stopAutoPlay() { clearInterval(autoPlayInterval); } // Запускаем автопрокрутку при загрузке страницы startAutoPlay(); // Останавливаем автопрокрутку, если пользователь навёл курсор на слайдер slider.addEventListener('mouseenter', stopAutoPlay); // Возобновляем автопрокрутку, когда пользователь убирает курсор slider.addEventListener('mouseleave', startAutoPlay); </script> </body> </html><p>В 2025 году больше половины сетевого трафика приходится на мобильные устройства. При разработке сайтов важно учитывать этот факт и адаптировать дизайн под экраны смартфонов. Добавим нашему слайдеру адаптивности - сделаем так, чтобы он автоматически подстраивался под разные размеры экранов.</p>

44 <p>Для этого нам надо будет внести изменения только в CSS-стили проекта. Добавим медиазапрос @media, который будет применять специальное оформление только в случаях, когда ширина экрана устройства меньше 480 пикселей:</p>

45 @media (max-width: 480px) { .slider { max-width: 100%; /* Растягиваем слайдер на всю ширину экрана */ } .prev, .next { padding: 5px; /* Уменьшаем размер кнопок */ font-size: 14px; /* Делаем шрифт поменьше */ } .caption { font-size: 12px; /* Уменьшаем текст подписи */ padding: 3px 6px; /* Уменьшаем отступы */ } }<p>Код адаптивного слайдера с автоматической прокруткой и подписями<a>доступен</a>на CodePen.</p>

46 <p>Мы попробовали разработать собственный слайдер и потратили на это довольно много времени. Если со временем нам захочется изменить анимации или добавить поддержку новых элементов управления, то придётся переписывать код.</p>

47 - <p>Хорошая новость в том, что есть готовые библиотеки, в которых разработчики уже реализовали всё, что может пригодиться. В них есть всевозможные анимации, элементы интерфейса и функции адаптивности. Ко всему этому можно получить доступ, просто подключив библиотеку к проекту.</p>

47 + <p>Хорошая новость в том, что есть готовые библиотеки, в которых разработчики уже реализовали всё, что может пригодиться. В них есть всевозможные анимации, элементы интерфейса и функции адаптивности. Ко всему этому можно получить дост��п, просто подключив библиотеку к проекту.</p>

48 <p>Рассмотрим популярные библиотеки с реализациями веб-слайдеров.</p>

49 <p><a>Swiper</a> - одна из самых мощных и гибких библиотек для создания слайдеров. Она поддерживает мобильные жесты, адаптивность, множество вариантов дизайна и эффектов анимации. С помощью Swiper на веб-страницу можно добавить как простую карусель из картинок, так и сложную мультимедийную галерею. Библиотеку в своих проектах используют DJI, Xiaomi, Adobe, Toyota, Disney, Verizon и BMW.</p>

50 <p>Например, с помощью Swiper можно встроить на сайт<a>слайдер банковских карт</a>с плавными анимациями:</p>

51 <em>Скриншот:<a>Swiper</a>/ Skillbox Meida</em><p>Вот как подключить Swiper и создать простой слайдер с её помощью:</p>

52  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.css"> <script src="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.js"></script>   <div class="swiper"> <div class="swiper-wrapper"> <div class="swiper-slide"><img src="Slide1.webp"></div> <div class="swiper-slide"><img src="Slide2.webp"></div> <div class="swiper-slide"><img src="Slide3.webp"></div> </div> <div class="swiper-button-next"></div> <div class="swiper-button-prev"></div> </div> <script> new Swiper('.swiper', { navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev' }, loop: true }); </script><p>В примере кода:</p>

53 <ul><li>В самом начале файла импортируем библиотеку, указывая ссылку на CDN. Надо обязательно указать две ссылки: на коллекцию стилей и скрипт.</li>

54 <li>С помощью класса swiper создаём контейнер для слайдера. В нём создаём классы для каждого изображения и кнопок.</li>

55 <li>Внутри тега <script> инициализируем слайдер Swiper с базовыми настройками.</li>

56 </ul><p><a>Glide</a> - легковесная библиотека слайдеров, в которой нет зависимостей от сторонних пакетов. Это полезно для проектов с высокими требованиями к безопасности. Glide поддерживает плавную прокрутку слайдов и адаптивный дизайн.</p>

57 <p>Для использования библиотеки в проекте надо также подключить стили, создать контейнер и инициализировать Glide:</p>

58  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@glidejs/glide/dist/css/glide.core.min.css"> <script src="https://cdn.jsdelivr.net/npm/@glidejs/glide/dist/glide.min.js"></script>  <div class="glide"> <div class="glide__track" data-glide-el="track"> <ul class="glide__slides"> <li class="glide__slide"><img src="Slide1.webp"></li> <li class="glide__slide"><img src="Slide2.webp"></li> <li class="glide__slide"><img src="Slide3.webp"></li> </ul> </div> </div> <script> // Инициализация Glide new Glide('.glide').mount(); </script><p><a>Splide</a> - быстрая и лёгкая библиотека слайдеров с широкой поддержкой браузеров и возможностью рендеринга элементов на стороне сервера. Это делает её отличным выбором для тяжёлых проектов, когда важна быстрая загрузка. Она также позволяет создавать карусели, вертикальные слайдеры и комбинировать эффекты.</p>

59 <p>Библиотеку так же просто подключить, как предыдущие:</p>

60  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@splidejs/splide/dist/css/splide.min.css"> <script src="https://cdn.jsdelivr.net/npm/@splidejs/splide/dist/js/splide.min.js"></script>  <div id="splide" class="splide"> <div class="splide__track"> <ul class="splide__list"> <li class="splide__slide"><img src="Slide1.webp"></li> <li class="splide__slide"><img src="Slide2.webp"></li> <li class="splide__slide"><img src="Slide3.webp"></li> </ul> </div> </div> <script> // Инициализация Splide new Splide('#splide').mount(); </script><p><a>ItcSlider</a> - простая библиотека слайдеров на чистом JavaScript. Она также не использует сторонние зависимости. Важно учитывать, что её нельзя подключить, указав ссылку на CDN проекта. Вместо этого надо скачать архив библиотек с GitHub и самостоятельно загрузить необходимые элементы на сервер, где хранится сайт.</p>

61 <p>Вот как использовать ItcSlider:</p>

62  <div class="itc-slider" data-slider="itc-slider" data-loop="true" data-autoplay="true" data-interval="3000"> <div class="itc-slider-wrapper"> <div class="itc-slider-items"> <div class="itc-slider-item"><img src="Slide1.webp"></div> <div class="itc-slider-item"><img src="Slide2.webp"></div> <div class="itc-slider-item"><img src="Slide3.webp"></div> </div> </div> </div><ul><li>Слайдер - интерактивный элемент на веб-странице, с помощью которого можно объединить несколько изображений в одну структуру. Пользователи могут переключать картинки в слайдере с помощью кнопок.</li>

63 <li>Простой слайдер можно создать с помощью HTML и CSS.</li>

64 <li>Для реализации удобных кнопок и автоматического переключения слайдов придётся использовать JavaScript.</li>

65 <li>Есть множество библиотек с готовыми слайдерами на все случаи жизни.</li>

66 </ul><a>Курс с трудоустройством: "Профессия Фронтенд-разработчик + ИИ" Узнать о курсе</a>