Карусели с CSS

Adam Argyle

Опубликовано: 20 марта 2025 г.

Начиная с Chrome 135 вы можете использовать функции спецификации CSS Overflow 5 , предназначенные для создания эффектов прокрутки и карусели.

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

В видео показано сочетание кнопок прокрутки, маркеров прокрутки, анимации, управляемой прокруткой, запросов scroll-state(), :has(), сетки, якоря и многого другого.

Еще более впечатляющей является история с доступностью.

Лучшие практики создания каруселей реализованы в браузере благодаря совместной работе команд инженеров и специалистов по доступности. Было бы очень сложно создать более доступную карусель.

Знакомьтесь ::scroll-button() и ::scroll-marker()

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

В первой версии функций карусели CSS кнопки и маркеры создаются с помощью CSS. Браузер размещает элементы как родственные, с соответствующими ролями, в правильном порядке вкладок и сохраняет их состояние. Это упрощает разработку доступной карусели.

• Кнопки прокрутки
  Элементы <button> с интерактивной прокруткой, предоставляемые браузером, обеспечивают доступ к контенту и прокручивают 85% области прокрутки при нажатии.

• Маркеры прокрутки
  Браузер предоставляет элементы навигации с отслеживанием состояния <a> , которые помогают получить доступ к содержимому любого запрошенного элемента в области прокрутки.

Остальная часть этой статьи демонстрирует, как создать карусель, используя эти новые функции.

Начните со скроллера

Вы можете добавлять кнопки и маркеры в любую область прокрутки на вашем сайте.

Следующий CSS-код создаёт базовую область прокрутки, которая будет использоваться на последующих этапах для добавления кнопок и маркеров. Привязка к прокрутке не является обязательной для карусели, но в этом примере она используется. Карусели также работают с вертикальными и двунаправленными скроллерами.

.carousel {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  
  > li {
    scroll-snap-align: center;
  }
}

Добавьте кнопки прокрутки с помощью ::scroll-button()

В зависимости от вашей операционной системы, вокруг полос прокрутки могут уже быть кнопки прокрутки. Встроенные кнопки прокрутки, как правило, сдвигают область прокрутки, в то время как кнопки прокрутки CSS занимают 85% области прокрутки.

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

Чтобы добавить кнопки прокрутки с помощью CSS:

1. Добавьте их, как и другие псевдоэлементы, с селектором: .carousel::scroll-button(right) для кнопки прокрутки вправо.
2. Укажите content с помощью необязательного доступного резервного альтернативного текста .

Браузер создаст настоящие кнопки с вашим контентом, которые будут соседствовать с полосой прокрутки. Теперь вы можете расположить эти кнопки, оформить их или привязать к ним anchor() по своему усмотрению. Следующий CSS-код создаст две кнопки: одну для кнопки прокрутки влево и одну для кнопки прокрутки вправо.

.carousel {
  …

  &::scroll-button(left) {
    content: "⬅" / "Scroll Left";
  }
  
  &::scroll-button(right) {
    content: "⮕" / "Scroll Right";
  }

  &::scroll-button(*):focus-visible {
    outline-offset: 5px;
  }
}

Добавьте маркеры прокрутки с помощью ::scroll-marker()

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

Пример такого различия — сезоны сериала. Вместо того, чтобы создавать маркер для каждого из 10 эпизодов, создайте два маркера, которые будут отмечать начало главы.

Обратите внимание: эти маркеры — не точки, а свойство content: "Season 1" псевдоэлемента. Маркеры также могут быть миниатюрами, которые обычно используются для галерей-каруселей в интернет-магазинах или на сайтах с фотографиями.

Маркеры похожи на внутристраничные ссылки <a> , но имеют некоторые особые функции:

1. Они включают состояние :target-current для случаев, когда маркер находится в поле зрения или привязан.
2. Включена навигация с помощью клавиатуры, которая ведет себя как фокус-группа .
3. Включен интерфейс чтения с экрана и отчеты в виде списка таблиц.

Добавьте маркеры к важным точкам в вашем скроллере, выполнив следующие шаги:

1. Определите размещение scroll-marker-group как before или after .
2. Выберите интересующие вас точки с помощью селектора .carousel .point-of-interest::scroll-marker .
3. Укажите content с помощью необязательного доступного резервного альтернативного текста : чисел, текста, пустого поля или изображения.

Браузер создаёт все маркеры и помещает их в контейнер группы маркеров. В этом примере для каждого элемента <li> создаётся пустой маркер, чтобы создать точку-маркер для каждого элемента.

.carousel {
  …

  scroll-marker-group: after;
  
  > li::scroll-marker {
    content: ' ';
  }

  > li::scroll-marker:target-current {
    background: var(--accent);
  }
}

Элемент, содержащий маркеры, называется ::scroll-marker-group и создаётся как родственный элемент скроллера, как и кнопки прокрутки. Этот контейнер можно стилизовать и разместить в любом месте.

Маркеры и кнопки одновременно

Сложите эти два фактора вместе, и опыт станет похож на карусель, но при этом получит следующие преимущества:

• Работает с отключенным JavaScript.
• Никакого увлажнения или ленивого подбора размера (уменьшите CLS).
• Готово ко всем видам анимации прокрутки и триггеров.
• Доступность включена.
• Совместимость с сенсорным экраном, мышью и клавиатурой.

Делай меньше, достигай большего, быстрее.

Ресурсы

В этой статье эти функции в основном называются «каруселью», но их возможности и полезность выходят далеко за рамки использования карусели. Чтобы полностью оценить потенциал этих новых функций, посетите галерею «Карусель» и ознакомьтесь с другими компонентами, такими как scrollspy, вкладки и слайды.

• Веб-стандарты
  • CSS Переполнение 5
  • Карусель-пояснитель
  • WAI Ария Карусель
• Хром
  • Намерение отправить
  • Галерея «Карусель»
  • Конфигуратор карусели

Конфигуратор карусели

Для визуальных и интерактивных учащихся попробуйте конфигуратор карусели .

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

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

• интерактивность
• состояние прокрутки
• анимация с помощью прокрутки
• и прокрутить привязку столбцов

Галерея «Карусель»

Демонстрационная площадка для тех, кому интересно узнать, насколько широки возможности этих функций, и ответить на вопросы вроде «можно ли это сделать X?». Каждая демонстрация основана на примере использования, найденном в интернете. В каждой демонстрации показано, как организовать работу этих кнопок и маркеров с помощью анимации, управляемой прокруткой , запросов scroll-state() и многого другого.

Интересный факт: весь сайт не использует JavaScript.

Примеры варьируются от восхитительно простых до фантастически надёжных и многофункциональных. Просмотр галереи должен вдохновлять, успокаивать и, конечно же, давать возможность изучить код. Найдите и изучите @layer utilities , которые помогут вам создавать карусели.

Дальнейшая работа

Мы гордимся тем, насколько хорошо эти функции интегрируются со всеми HTML и CSS. Доступность CSS-карусели первоклассная. Производительность CSS-карусели превосходит любое решение на JavaScript. Пользовательский интерфейс CSS-карусели естественный, плавный и насыщенный. Однако есть способы улучшить его.

Принесите свои собственные элементы

Работа над добавлением собственных компонентов для кнопок прокрутки и маркеров уже ведётся. Это означает, что вы можете использовать собственные теги <a> с расширенным контентом, например, значками. Вы также можете использовать собственные многослойные кнопки, созданные с помощью Tailwind .

Циклическая прокрутка

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

Надеемся, вам понравится эта функция. Мы с нетерпением ждем, когда все пользователи с ограниченными возможностями JavaScript смогут воспользоваться удобными возможностями прокрутки и получить все преимущества сокращения CLS благодаря более точному графику жизненного цикла встроенной карусели.

Меньше действий от вас, больше удобства для пользователей, более высокая производительность.