Карусели с 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 эпизодов, создайте 2 маркера, ведущие к началу главы.

Обратите внимание, что эти маркеры не являются точками, они используют свойство 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: ' ';
    
    &:target-current {
      background: var(--accent);
    }
  }
}

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

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

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

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

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

Ресурсы

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

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

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

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

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

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

• интерактивность
• состояние прокрутки
• анимация, управляемая прокруткой
• и прокручивать столбцы привязки

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

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

Интересный факт: весь сайт не содержит JavaScript.

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

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

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

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

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

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

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

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

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