Вы сверстали сайт и сделали его красивым с помощью CSS. Осталось добавить интерактива, и можно добавлять проект в портфолио.
«Оживить» на сайте можно что угодно: меню, модальные окна, корзину, пагинацию… В этой статье мы разберём слайдер — посмотрим, как его сделать на чистом JavaScript. Слайдер пригодится для раздела с отзывами, фотографиями сотрудников, изображениями товаров или чего-нибудь ещё — всё зависит только от вашей фантазии и проекта.
☝ Мы покажем лишь один из возможных вариантов. Это не эталонное решение, да в разработке и не бывает единственно верного способа решить задачу. Но код точно работает, поэтому можете скопировать его в свой проект.
Пример простого слайдера на чистом JavaScript
Что здесь происходит
- Мы ищем в HTML-разметке контейнер слайдера, кнопки и изображения. Записываем всё в переменные.
- Находим общее количество слайдов. Затем создаём переменную
slideIndexи делаем её равной0— это индекс активного слайда - Добавляем обработчики событий на кнопки, чтобы реагировать на клики пользователя.
- Когда пользователь нажимает на кнопку
.prev-button, мы переключаемся на предыдущий слайд (если текущий слайд не первый) и обновляем отображение слайдера. - Когда пользователь нажимает на кнопку
.next-button, переключаемся на следующий слайд (если текущий слайд не последний) и обновляем отображение слайдера. - Функция
updateSlider()обновляет отображение слайдера, показывая только текущий слайд и скрывая остальные. - При загрузке страницы мы вызываем
updateSlider(), чтобы отобразить первый слайд и настроить слайдер для начала работы.
Этот код можно бесконечно менять и дорабатывать: настроить анимацию, удалить зацикливание или сделать слайдер адаптивным. Или можно использовать наш пример, чтобы понять, как работает слайдер, а затем написать свой код — ещё проще и чище.
Как сделать анимацию любой сложности
Популярные библиотеки для слайдеров
Если слайдер нужен здесь и сейчас, но писать с нуля не хочется, а пример выше не подходит — используйте библиотеки.
Slick
Гибкая библиотека для адаптивных слайдеров. Здесь можно настроить показ одного или нескольких слайдов, включить автоматическое переключение и задать скорость смены слайдов, подключить ленивую загрузку, настроить стрелки и пагинацию.
Swiper
«Самый современный мобильный сенсорный слайдер» — так разработчики говорят о своей библиотеке. В ней есть плавные переходы, 3D-анимации, автоматическое переключение слайдов, пагинация и навигация. А ещё здесь гибкие макеты: можно размещать слайды в несколько строк, добавлять несколько слайдов в столбец, управлять расстояниями между слайдами.
Owl Carousel
Простая в использовании библиотека, подойдёт даже новичкам. Она поддерживает различные переходы и анимации, есть настройки для автоматического переключения слайдов и пагинация.
Glide.js
Легковесная и быстрая библиотека: со всеми функциями она весит всего 28 КБ (8 КБ в сжатом виде). При этом подключать всё необязательно — лишние модули можно удалить, и тогда она станет ещё легче.
Параметров много. Можно настроить автоматическую прокрутку, добавить анимации, указать минимальное расстояние для смены слайда, включить зацикливание… Почти всё то же, что и в других библиотеках.
Какую из библиотек использовать — решать вам. У каждой понятная документация с примерами кода, вы точно разберётесь, как создать слайдер. И у всех гибкие настройки. Поэтому попробуйте поработать с каждой библиотекой или просто посмотрите примеры и выберите ту, что больше нравится и подходит вам.