Carousel
Carousel — набор компонентов для цикличной прокрутки элементов с контентом (карточки, изображения, текст и любое другое содержимое элементов контента)
Из чего состоит
  1. Точки
  2. Левая стрелка
  3. Правая стрелка
  4. Элементы контента (слайды)
Основные свойства
Тема (Theme)
Форма стрелок (Theme)
Приоритет кнопок (Priority)
Состояния точек (State)
Позиция стрелок (Position)
Отключаемые элементы
👁 Стрелки
👁 Точки
Цвет элементов
Стрелки и активная точка могут быть акцентного цвета со всеми состояниями (default/hover/active).
Расположение стрелок
Стрелки могут располагаться внутри контейнера со слайдами или снаружи (отступы от краев экрана по 24px).
Содержимое слайдов “Content Item”
Элементы карусели (слайды) могут быть любыми: изображение с текстом, только изображения или любые другие элементы, которые можно поместить в область одного слайда.
Ширина и высота слайдов, отступы, масштабирование изображений внутри них могут быть любыми. Задаются отдельно на проекте.
Виды карусели
1. По центру — все слайды встают ровно по центру экрана. Ширина видимой области карусели ограничена его содержимым внутри.
2. С началом слева — самый первый слайд выравнивается по левой (первой) силовой линии/колонке. Все содержимое справа показывается. Ширина видимой области карусели ограничена только областью левее первого слайда.
3. Бесконечная прокрутка — Один слайд расположен ровно по центру экрана. Видимая область ограничена только экраном устройства.
Максимальный размер одного слайда
Слайд может быть целым экраном (блоком) шириной 100% экрана. Видимая область карусели в таком случае тоже 100% экрана
Максимальное количество точек
Максимальное кол-во точек — 5.
До 5 слайдов: кол-во слайдов равно количеству точек.
Больше 5 слайдов — всегда 5 точек.
Поведение точек
До 5 слайдов: активная точка равна номеру слайда.
Больше 5 слайдов: активная точка — центральная (3-я), предпоследний слайд — 4-я точка, последний слайд — 5-я точка
Поведение стрелок
В слайдерах с началом слева или по центру, если влево нечего скроллить, то левая стрелка в состоянии “Disabled”. Если вправо нечего скроллить, то правая стрелка в состоянии “Disabled”.