Создание плавных каруселей на чистом CSS

Долгие годы создание каруселей означало использование JavaScript-библиотек, таких как Swiper или Glide. Каждая добавляла килобайты к вашему бандлу, вводила зависимости и требовала тщательного управления обработчиками событий и состоянием. Но современный CSS незаметно эволюционировал, чтобы обрабатывать карусели нативно — без JavaScript.

Эта статья исследует, как создавать производительные, доступные CSS-карусели с использованием scroll-snap, экспериментальных псевдоэлементов и других техник на чистом CSS, которые работают сегодня и останутся актуальными на годы вперёд.

Основа: Scroll Snap CSS

Краеугольным камнем любой карусели на чистом CSS является свойство scroll-snap. Оно превращает прокручиваемый контейнер в постраничный интерфейс всего несколькими строками:

.carousel {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
}

.carousel-item {
  flex: 0 0 100%;
  scroll-snap-align: center;
}

Это создаёт горизонтальную карусель, где каждый элемент встаёт на место. Ключевое слово mandatory гарантирует, что пользователи всегда попадают на полный слайд, в то время как scroll-behavior: smooth добавляет плавные переходы между элементами.

Scroll Snap CSS работает во всех современных браузерах, что делает его наиболее надёжной основой для каруселей без JavaScript. Для адаптивного дизайна комбинируйте его с CSS Grid или настройте flex-basis для отображения нескольких элементов на экране:

.carousel-item {
  flex: 0 0 calc(33.333% - 1rem);
  margin: 0 0.5rem;
}

Современная навигация: экспериментальные псевдоэлементы

Chrome 135+ вводит экспериментальные псевдоэлементы, которые автоматически генерируют элементы управления каруселью. Эти функции требуют включения экспериментальных возможностей веб-платформы в флагах Chrome.

Псевдоэлемент ::scroll-button создаёт кнопки «назад»/«вперёд» без дополнительной разметки:

.carousel::scroll-button(inline-start),
.carousel::scroll-button(inline-end) {
  background: rgba(0, 0, 0, 0.5);
  color: white;
  padding: 1rem;
  border: none;
}

.carousel::scroll-button(inline-start)::before {
  content: "←";
}

.carousel::scroll-button(inline-end)::before {
  content: "→";
}

Аналогично, ::scroll-marker генерирует точки пагинации для каждой прокручиваемой секции:

.carousel {
  scroll-marker-group: after;
}

.carousel-item::scroll-marker {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ccc;
}

.carousel-item::scroll-marker:target-current {
  background: #333;
}

Обратите внимание, что эти псевдоэлементы экспериментальные, и их синтаксис может измениться. Псевдокласс :target-current подсвечивает активный маркер при прокрутке пользователем. Эти функции снижают требования к JavaScript, обеспечивая при этом нативную поддержку доступности.

Стратегия фолбэка для продакшена

Поскольку scroll-button и scroll-marker имеют ограниченную поддержку браузерами, используйте определение возможностей с @supports:

/* Резервная навигация */
.carousel-nav {
  display: flex;
  gap: 0.5rem;
}

/* Скрываем резервную навигацию, когда поддерживаются нативные элементы управления */
@supports (scroll-button-inline: both) {
  .carousel-nav {
    display: none;
  }
}

Для более широкой совместимости комбинируйте scroll-snap с якорными ссылками для навигации:

<nav class="carousel-nav">
  <a href="#slide1">1</a>
  <a href="#slide2">2</a>
  <a href="#slide3">3</a>
</nav>

<div class="carousel">
  <div id="slide1" class="carousel-item">...</div>
  <div id="slide2" class="carousel-item">...</div>
  <div id="slide3" class="carousel-item">...</div>
</div>

CSS-карусель с автопрокруткой без JavaScript

Создание CSS-карусели с автопрокруткой требует только анимации через keyframes:

@keyframes slide {
  0%, 20% { transform: translateX(0); }
  25%, 45% { transform: translateX(-100%); }
  50%, 70% { transform: translateX(-200%); }
  75%, 95% { transform: translateX(-300%); }
  100% { transform: translateX(0); }
}

.autoplay-carousel {
  display: flex;
  animation: slide 12s infinite;
}

.autoplay-carousel:hover {
  animation-play-state: paused;
}

Эта техника работает надёжно, но жертвует контролем пользователя ради простоты. Пауза при наведении улучшает юзабилити, а комбинирование с prefers-reduced-motion учитывает предпочтения доступности:

@media (prefers-reduced-motion: reduce) {
  .autoplay-carousel {
    animation: none;
  }
}

Доступность и производительность

Карусели на чистом CSS превосходны в плане производительности — никакого парсинга JavaScript, никаких обработчиков событий, никаких перерасчётов layout. Нативная прокрутка браузера автоматически обрабатывает ввод с сенсорного экрана, клавиатуры и мыши.

Для доступности убедитесь, что:

• Scroll-snap обеспечивает плавную прокрутку, но полная клавиатурная навигация и доступные элементы управления требуют новых функций ::scroll-button и ::scroll-marker.
• Индикаторы фокуса остаются видимыми
• Контент остаётся доступным при отказе CSS
• Сенсорные цели соответствуют минимальному размеру 44×44px

Добавьте ARIA-метки для улучшения работы со скринридерами:

<div class="carousel" role="region" aria-label="Галерея продуктов">
  <div class="carousel-item" aria-label="Слайд 1 из 3">...</div>
</div>

Заключение

Современный CSS устранил необходимость в JavaScript-библиотеках для каруселей в большинстве случаев. Scroll-snap обеспечивает основу сегодня, в то время как новые функции, такие как scroll-button и scroll-marker, предвосхищают будущее, где сложные UI-компоненты не требуют JavaScript. Эти техники уменьшают размер бандла, улучшают производительность и упрощают поддержку — преимущества, которые накапливаются со временем.

Начните со scroll-snap для продакшн-сайтов. Экспериментируйте с новыми псевдоэлементами в Chrome. Самое главное — задайтесь вопросом, нужна ли вам библиотека каруселей на 50 КБ, когда 20 строк CSS достигают того же результата.

Часто задаваемые вопросы

Truly understand users experience

See every user interaction, feel every frustration and track all hesitations with OpenReplay — the open-source digital experience platform. It can be self-hosted in minutes, giving you complete control over your customer data. . Check our GitHub repo and join the thousands of developers in our community..