Содержание
Благодаря Scroll Snap свойствам и событиям мы могли уже делать простенькие карусели без тяжеловесных JavaScript библиотек.
Новые возможности
Начиная с Chrome 135 у нас появилось ещё больше возможностей.
Теперь мы можем через CSS создавать кнопки и маркеры, которые будут подскролливать к нужному слайду.
::scroll-button()
С помощью псевдо-элемента ::scroll-button() можно описать кнопку, листающую карусель в нужную сторону.
::scroll-marker
Псевдо-элемент ::scroll-marker создаёт навигационные индикаторы (точки, табнейлы), которые отображают текущую позицию в карусели и позволяют перейти к нужному слайду.
.carousel {
/* Добавляем скролл и скролл-снап */
overflow-x: auto;
scroll-snap-type: x mandatory;
> li {
scroll-snap-align: center;
}
/* Добавляем кнопки для скролла карусели */
&::scroll-button(left) {
content: "⬅" / "Scroll Left";
}
&::scroll-button(right) {
content: "⮕" / "Scroll Right";
}
&::scroll-button(*):focus-visible {
outline-offset: 5px;
}
/* Добавляем маркеры */
scroll-marker-group: after;
> li::scroll-marker {
content: ' ';
}
> li::scroll-marker:target-current {
background: blue;
}
}Кнопки и маркеры можно стилизовать на ваш вкус и цвет.
Самое прикольное, что это всё доступно из коробки: браузер навешивает нужные роли, добавляет управление через клавиатуру и поддержку скринридеров.
В статье есть примеры и демки, обязательно изучите.
Фича крутая, но меня почему-то она насторожила. Сначала показалось, что реализация сильно конкретная, что ли. Мол, прям под карусель. С другой стороны, у нас есть же элементы типа селекта, диалога, дитейлс, которые тоже закрывают определённые UI/UX паттерны. Почему бы и тут не сделать такое для каруселек.