Frontend
Создаем полноэкранный слайдер с помощью Swiper.js
Toni_Dev
Иконка календаря 09.03.2025
Иконка чата 0
Иконка глаза 52
 

Swiper.js — один из самых мощных и гибких инструментов для создания слайдеров. Он легкий, адаптивный и поддерживает массу функций, включая кастомные анимации, ленивая загрузка изображений и гибкую настройку управления. В этом руководстве мы разберем, как создать стильный полноэкранный слайдер для автосервиса.

Скачать готовый код можно на GitHub.

Что будет в итоговом слайдере?

  • Пять полноэкранных изображений — фото автосервиса, машин, механиков за работой.
  • Заголовок и подзаголовок поверх каждой картинки.
  • Затемнение фона, чтобы текст был хорошо виден.
  • Кастомные кнопки навигации (влево/вправо).
  • Точки-пагинация внизу.

Часть 1. Установка Swiper.js и подготовка разметки

Прежде чем перейти к дизайну, нужно установить Swiper.js и создать базовую HTML-разметку.

Установка библиотеки

В 2025 году Swiper.js доступен как npm-пакет, но также можно подключить его через CDN. Рассмотрим оба варианта.

Вариант 1. Установка через npm (рекомендуемый способ)

Если проект использует сборщик (Vite, Webpack, Parcel), устанавливаем Swiper так:

npm install swiper

Затем подключаем его в нашем файле:

import Swiper from 'swiper';
import 'swiper/css';
import 'swiper/css/navigation';
import 'swiper/css/pagination';

Вариант 2. Подключение через CDN

Если не хочется возиться с npm, можно просто вставить ссылки в <head>:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>

Разметка слайдера

Добавим базовую HTML-структуру. Нам нужен контейнер swiper, внутри которого будет swiper-wrapper слайдов. В каждый слайд (swiper-slide) поместим изображение, затемнение и текст.

<div class="swiper">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      <div class="slide-bg" style="background-image: url('img1.jpg');"></div>
      <div class="slide-content">
        <h2>Профессиональный автосервис</h2>
        <p>Диагностика, ремонт и обслуживание</p>
      </div>
    </div>
    <div class="swiper-slide">
      <div class="slide-bg" style="background-image: url('img2.jpg');"></div>
      <div class="slide-content">
        <h2>Современное оборудование</h2>
        <p>Точность и качество на высшем уровне</p>
      </div>
    </div>
    <div class="swiper-slide">
      <div class="slide-bg" style="background-image: url('img3.jpg');"></div>
      <div class="slide-content">
        <h2>Опытные мастера</h2>
        <p>Гарантия надежности</p>
      </div>
    </div>
    <div class="swiper-slide">
      <div class="slide-bg" style="background-image: url('img4.jpg');"></div>
      <div class="slide-content">
        <h2>Быстро и качественно</h2>
        <p>Минимальное время ожидания</p>
      </div>
    </div>
    <div class="swiper-slide">
      <div class="slide-bg" style="background-image: url('img5.jpg');"></div>
      <div class="slide-content">
        <h2>Полный спектр услуг</h2>
        <p>От шиномонтажа до сложного ремонта</p>
      </div>
    </div>
  </div>

  <!-- Кнопки навигации -->
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>

  <!-- Пагинация -->
  <div class="swiper-pagination"></div>
</div>

Часть 2. Стилизация слайдера: затемнение, текст и адаптивность

Теперь, когда у нас есть базовая разметка, пора сделать слайдер красивым. Мы добавим стильные шрифты, затемним фон для лучшей читаемости текста и убедимся, что слайдер выглядит отлично на любых экранах.

Базовые стили

Добавим стили для всей страницы, чтобы слайдер занимал 100% ширины и высоты экрана:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  overflow: hidden;
}

.swiper {
  width: 100%;
  height: 100vh;
  position: relative;
}

Здесь height: 100vh делает слайдер полноэкранным.

Фон с затемнением

Мы используем background-image для установки фонового изображения и добавим псевдоэлемент с полупрозрачным черным слоем для затемнения:

.swiper-slide {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.slide-bg {
  position: absolute;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.swiper-slide::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5); /* Затемнение */
  z-index: 1;
}

Блок .slide-bg отвечает за установку изображения, а ::before затемняет фон.

Оформление текста

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

.slide-content {
  position: relative;
  z-index: 2;
  max-width: 80%;
}

.slide-content h2 {
  font-size: 3rem;
  font-weight: bold;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.slide-content p {
  font-size: 1.5rem;
  opacity: 0.8;
}

max-width: 80% ограничивает ширину текста, чтобы он не занимал всю ширину экрана.

Кастомные кнопки

Swiper по умолчанию добавляет кнопки навигации, но они не всегда выглядят красиво. Доработаем их:

.swiper-button-next,
.swiper-button-prev {
  color: #fff;
  width: 50px;
  height: 50px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.3s;
}

.swiper-button-next:hover,
.swiper-button-prev:hover {
  background: rgba(255, 255, 255, 0.5);
}

Теперь кнопки выглядят аккуратно и не отвлекают от контента.

Точки-пагинация

Сделаем точки-пагинации (индикаторы внизу) более стильными:

.swiper-pagination-bullet {
  background: rgba(255, 255, 255, 0.5);
  width: 12px;
  height: 12px;
  transition: background 0.3s;
}

.swiper-pagination-bullet-active {
  background: #fff;
}

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

Адаптивность

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

@media (max-width: 768px) {
  .slide-content h2 {
    font-size: 2rem;
  }

  .slide-content p {
    font-size: 1.2rem;
  }

  .swiper-button-next,
  .swiper-button-prev {
    width: 40px;
    height: 40px;
  }
}

Часть 3. Инициализация Swiper.js и добавление анимаций

У нас есть разметка и стили, пора заставить слайдер работать. Мы настроим Swiper.js, добавим плавные анимации и сделаем так, чтобы слайды сменялись автоматически.

Инициализация Swiper

Создадим JavaScript-файл script.js и добавим в него код для инициализации Swiper: 

document.addEventListener("DOMContentLoaded", function () {
  const swiper = new Swiper(".swiper", {
    loop: true, // Зацикливание слайдов
    autoplay: {
      delay: 5000, // Автопрокрутка каждые 5 секунд
      disableOnInteraction: false, // Автопрокрутка не останавливается при взаимодействии
    },
    navigation: {
      nextEl: ".swiper-button-next",
      prevEl: ".swiper-button-prev",
    },
    pagination: {
      el: ".swiper-pagination",
      clickable: true,
    },
    effect: "fade", // Плавное появление нового слайда
    fadeEffect: {
      crossFade: true,
    },
    on: {
      init: function () {
        // Показываем контент на первом активном слайде
        document
          .querySelectorAll(".swiper-slide-active .slide-content")
          .forEach((el) => {
            el.style.opacity = "1";
            el.style.transform = "translateY(0)";
          });
      },
    },
  });
});

Разбор кода

  • loop: true — слайды зациклены, т. е. после последнего идет первый.
  • autoplay — активирует автоматическую смену слайдов.
  • navigation — подключает кнопки навигации.
  • pagination — включает точки (пагинацию), которые можно кликать.
  • effect: «fade» — делает плавную смену слайдов без резкого перехода.

Теперь слайдер полностью работает. Но мы можем сделать его еще лучше!

Добавляем анимации для текста

Чтобы текст не просто появлялся, а красиво появлялся с эффектом, добавим анимации через CSS.

Добавим базовые стили:

.slide-content {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

Сначала текст будет невидимым opacity: 0 и сдвинутым вниз translateY(20px).

Теперь добавим JavaScript-код, который будет активировать анимацию:

swiper.on("slideChangeTransitionStart", function () {
  document.querySelectorAll(".slide-content").forEach((el) => {
    el.style.opacity = "0";
    el.style.transform = "translateY(20px)";
  });
});

swiper.on("slideChangeTransitionEnd", function () {
  document.querySelectorAll(".swiper-slide-active .slide-content").forEach((el) => {
    el.style.opacity = "1";
    el.style.transform = "translateY(0)";
  });
});

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

Улучшаем производительность

Чтобы слайдер работал плавно даже на слабых устройствах, добавим ленивую загрузку изображений.

В HTML изменим background-image на data-background:

<div class="slide-bg" data-background="img1.jpg"></div>

И обновим JavaScript:

swiper.on("slideChange", function () {
  document.querySelectorAll(".swiper-slide-active .slide-bg").forEach((el) => {
    const bg = el.getAttribute("data-background");
    if (bg && !el.style.backgroundImage) {
      el.style.backgroundImage = `url(${bg})`;
    }
  });
});

Теперь изображения загружаются только тогда, когда слайд становится активным.

Часть 4. Доработка UX и интеграция в проект

Когда слайдер работает, давай улучшим пользовательский опыт (UX) и разберем, как его интегрировать в реальный проект.

Улучшение UX: плавная прокрутка при взаимодействии

Когда пользователь начинает листать слайды вручную, автопрокрутка останавливается. Чтобы этого не происходило, добавим небольшую настройку:

swiper.params.autoplay.disableOnInteraction = false;
swiper.autoplay.start();

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

Улучшение адаптивности

Добавим больше точек остановки, чтобы на разных устройствах слайдер выглядел идеально:

const swiper = new Swiper(".swiper", {
  loop: true,
  autoplay: {
    delay: 5000,
    disableOnInteraction: false,
  },
  navigation: {
    nextEl: ".swiper-button-next",
    prevEl: ".swiper-button-prev",
  },
  pagination: {
    el: ".swiper-pagination",
    clickable: true,
  },
  effect: "fade",
  fadeEffect: {
    crossFade: true,
  },
  breakpoints: {
    768: {
      autoplay: {
        delay: 7000, // На планшетах чуть длиннее показ слайда
      },
    },
    1024: {
      autoplay: {
        delay: 9000, // На больших экранах еще дольше
      },
    },
  },
});

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

Добавление плавного входа слайдера на страницу

Когда страница загружается, можно добавить эффект плавного появления слайдера:

.swiper {
  opacity: 0;
  transform: scale(0.95);
  transition: opacity 1s ease-out, transform 1s ease-out;
}

.swiper.loaded {
  opacity: 1;
  transform: scale(1);
}

Добавим код в script.js, который будет активировать класс loaded:

document.addEventListener("DOMContentLoaded", function () {
  document.querySelector(".swiper").classList.add("loaded");
});

Теперь слайдер не просто появится, а будет плавно увеличиваться при загрузке.

Интеграция в реальный проект

Где можно использовать этот слайдер?

  • Главная страница автосервиса — первый экран сайта с ключевыми преимуществами.
  • Галерея работ — показ выполненных ремонтов.
  • Отзывы клиентов — демонстрация довольных клиентов с их комментариями.

Если слайдер нужен на главной странице, его лучше размещать в <header> или в отдельном <section>:

<header>
  <div class="swiper">...</div>
</header>

Если он используется в разделе отзывов или галереи, можно добавить заголовок перед ним:

<section>
  <h2>Наши работы</h2>
  <div class="swiper">...</div>
</section>

Итог

Мы создали стильный, профессиональный слайдер с:

  • Полноэкранными изображениями
  • Заголовками и подзаголовками
  • Затемнением фона для читаемости текста
  • Кастомными кнопками навигации и точками-пагинацией
  • Плавными анимациями появления текста
  • Ленивой загрузкой изображений для скорости

Теперь его можно легко интегрировать в любой проект. Swiper.js — мощный инструмент, и это только малая часть его возможностей. Можно добавить 3D-эффекты, кастомные стили и другие фишки, но уже в таком виде слайдер выглядит профессионально и современно.

Если ты делаешь сайт для автосервиса (или любого другого бизнеса), этот слайдер точно добавит ему стиль и динамику.

 

Комментарии

0

Без регистрации и смс