Карусель
Карусель показывает материалы по одному в области постоянной высоты: баннеры,
новости, изображения. Она добавляет к движку
Swiper готовые переключатели,
пагинацию, автопрокрутку с кнопкой паузы и доступную разметку слайдов. Не
прячьте в слайды сведения, без которых нельзя закончить основную задачу.
Пример
Материал 1
Краткое описание 1-го слайда.
Материал 2
Краткое описание 2-го слайда.
Материал 3
Краткое описание 3-го слайда.
chevron_left chevron_right HTML wrap_text Wrap source lines content_copy Copy
<div class ="sf-carousel" data-label ="Новости продукта" >
<div class ="sf-carousel-slider swiper" >
<div class ="swiper-wrapper h-full" >
<article class ="swiper-slide sf-carousel-slide p-x-1" >
<div class ="bg-surface-container color-on-surface h-full flex flex-col justify-center items-center p-3 radius-3" >
<strong >Материал 1</strong >
<p class ="m-0 color-on-surface-variant" >Краткое описание 1-го слайда.</p >
</div >
</article >
<article class ="swiper-slide sf-carousel-slide p-x-1" >
<div class ="bg-surface-container color-on-surface h-full flex flex-col justify-center items-center p-3 radius-3" >
<strong >Материал 2</strong >
<p class ="m-0 color-on-surface-variant" >Краткое описание 2-го слайда.</p >
</div >
</article >
<article class ="swiper-slide sf-carousel-slide p-x-1" >
<div class ="bg-surface-container color-on-surface h-full flex flex-col justify-center items-center p-3 radius-3" >
<strong >Материал 3</strong >
<p class ="m-0 color-on-surface-variant" >Краткое описание 3-го слайда.</p >
</div >
</article >
</div >
</div >
<button type ="button" class ="sf-carousel-switch sf-carousel-switch--prev" aria-label ="Предыдущий слайд" ><i class ="sf-icon" aria-hidden ="true" >chevron_left</i ></button >
<button type ="button" class ="sf-carousel-switch sf-carousel-switch--next" aria-label ="Следующий слайд" ><i class ="sf-icon" aria-hidden ="true" >chevron_right</i ></button >
<div class ="sf-carousel-pagination" ></div >
</div >
Разметка
Минимальную разметку показывает пример выше. Части вложены так:
sf-carousel → sf-carousel-slider swiper → swiper-wrapper → слайды
swiper-slide sf-carousel-slide; рядом со слайдером в sf-carousel —
переключатели sf-carousel-switch, пагинация sf-carousel-pagination и
кнопка автопрокрутки sf-carousel-rotation.
Высота карусели постоянна; её задаёт переменная --sf-carousel--block-size.
Ленте swiper-wrapper добавьте h-full, чтобы слайды заняли эту высоту.
Переключатели — кнопки с классами sf-carousel-switch--prev и
sf-carousel-switch--next; они стоят по краям, в начале и в конце строки с
учётом направления письма. sf-carousel-switch--left и
sf-carousel-switch--right — другие имена тех же классов.
Пагинацию — пустой sf-carousel-pagination — скрипт заполняет кнопками по
числу слайдов.
Скрипт компонента находит блоки .sf-carousel при загрузке страницы и в
добавленной позже разметке. Ему нужен движок
Swiper : карусель ждёт его сама.
Атрибуты блока: data-label — имя карусели, data-loop="true" — после
последнего слайда переходить к первому, data-speed — длительность
перелистывания в миллисекундах.
Варианты
Переключатели
Цвет переключателей по умолчанию — основной.
sf-carousel-switch--secondary-container, sf-carousel-switch--surface-zero
и sf-carousel-switch--surface-inverse дают вторичный, светлый и инверсный
фон — выбирайте тот, что читается поверх слайдов. sf-carousel-switch--big
увеличивает кнопку до высоты элемента управления ступени 2.
HTML wrap_text Wrap source lines content_copy Copy
<div class ="grid grid-col-1 md:grid-col-2 gap-3" >
<div class ="flex flex-col gap-1" >
<div class ="sf-carousel carousel-demo-compact" data-label ="без класса цвета" >
<div class ="sf-carousel-slider swiper" >
<div class ="swiper-wrapper h-full" >
<div class ="swiper-slide sf-carousel-slide p-x-1" ><div class ="bg-surface-container color-on-surface h-full flex justify-center items-center p-3 radius-3" >Слайд 1</div ></div >
<div class ="swiper-slide sf-carousel-slide p-x-1" ><div class ="bg-surface-container color-on-surface h-full flex justify-center items-center p-3 radius-3" >Слайд 2</div ></div >
<div class ="swiper-slide sf-carousel-slide p-x-1" ><div class ="bg-surface-container color-on-surface h-full flex justify-center items-center p-3 radius-3" >Слайд 3</div ></div >
</div >
</div >
<button type ="button" class ="sf-carousel-switch sf-carousel-switch--prev" aria-label ="Предыдущий слайд" ><i class ="sf-icon" aria-hidden ="true" >chevron_left</i ></button >
<button type ="button" class ="sf-carousel-switch sf-carousel-switch--next" aria-label ="Следующий слайд" ><i class ="sf-icon" aria-hidden ="true" >chevron_right</i ></button >
<div class ="sf-carousel-pagination" ></div >
</div >
<code class ="text-1/2 color-on-surface-variant" >без класса цвета</code >
</div >
<div class ="flex flex-col gap-1" >
<div class ="sf-carousel carousel-demo-compact" data-label ="sf-carousel-switch--secondary-container" >
<div class ="sf-carousel-slider swiper" >
<div class ="swiper-wrapper h-full" >
<div class ="swiper-slide sf-carousel-slide p-x-1" ><div class ="bg-surface-container color-on-surface h-full flex justify-center items-center p-3 radius-3" >Слайд 1</div ></div >
<div class ="swiper-slide sf-carousel-slide p-x-1" ><div class ="bg-surface-container color-on-surface h-full flex justify-center items-center p-3 radius-3" >Слайд 2</div ></div >
<div class ="swiper-slide sf-carousel-slide p-x-1" ><div class ="bg-surface-container color-on-surface h-full flex justify-center items-center p-3 radius-3" >Слайд 3</div ></div >
</div >
</div >
<button type ="button" class ="sf-carousel-switch sf-carousel-switch--prev sf-carousel-switch--secondary-container" aria-label ="Предыдущий слайд" ><i class ="sf-icon" aria-hidden ="true" >chevron_left</i ></button >
<button type ="button" class ="sf-carousel-switch sf-carousel-switch--next sf-carousel-switch--secondary-container" aria-label ="Следующий слайд" ><i class ="sf-icon" aria-hidden ="true" >chevron_right</i ></button >
<div class ="sf-carousel-pagination" ></div >
</div >
<code class ="text-1/2 color-on-surface-variant" >sf-carousel-switch--secondary-container</code >
</div >
<div class ="flex flex-col gap-1" >
<div class ="sf-carousel carousel-demo-compact" data-label ="sf-carousel-switch--surface-zero" >
<div class ="sf-carousel-slider swiper" >
<div class ="swiper-wrapper h-full" >
<div class ="swiper-slide sf-carousel-slide p-x-1" ><div class ="bg-surface-container color-on-surface h-full flex justify-center items-center p-3 radius-3" >Слайд 1</div ></div >
<div class ="swiper-slide sf-carousel-slide p-x-1" ><div class ="bg-surface-container color-on-surface h-full flex justify-center items-center p-3 radius-3" >Слайд 2</div ></div >
<div class ="swiper-slide sf-carousel-slide p-x-1" ><div class ="bg-surface-container color-on-surface h-full flex justify-center items-center p-3 radius-3" >Слайд 3</div ></div >
</div >
</div >
<button type ="button" class ="sf-carousel-switch sf-carousel-switch--prev sf-carousel-switch--surface-zero" aria-label ="Предыдущий слайд" ><i class ="sf-icon" aria-hidden ="true" >chevron_left</i ></button >
<button type ="button" class ="sf-carousel-switch sf-carousel-switch--next sf-carousel-switch--surface-zero" aria-label ="Следующий слайд" ><i class ="sf-icon" aria-hidden ="true" >chevron_right</i ></button >
<div class ="sf-carousel-pagination" ></div >
</div >
<code class ="text-1/2 color-on-surface-variant" >sf-carousel-switch--surface-zero</code >
</div >
<div class ="flex flex-col gap-1" >
<div class ="sf-carousel carousel-demo-compact" data-label ="sf-carousel-switch--surface-inverse" >
<div class ="sf-carousel-slider swiper" >
<div class ="swiper-wrapper h-full" >
<div class ="swiper-slide sf-carousel-slide p-x-1" ><div class ="bg-surface-container color-on-surface h-full flex justify-center items-center p-3 radius-3" >Слайд 1</div ></div >
<div class ="swiper-slide sf-carousel-slide p-x-1" ><div class ="bg-surface-container color-on-surface h-full flex justify-center items-center p-3 radius-3" >Слайд 2</div ></div >
<div class ="swiper-slide sf-carousel-slide p-x-1" ><div class ="bg-surface-container color-on-surface h-full flex justify-center items-center p-3 radius-3" >Слайд 3</div ></div >
</div >
</div >
<button type ="button" class ="sf-carousel-switch sf-carousel-switch--prev sf-carousel-switch--surface-inverse" aria-label ="Предыдущий слайд" ><i class ="sf-icon" aria-hidden ="true" >chevron_left</i ></button >
<button type ="button" class ="sf-carousel-switch sf-carousel-switch--next sf-carousel-switch--surface-inverse" aria-label ="Следующий слайд" ><i class ="sf-icon" aria-hidden ="true" >chevron_right</i ></button >
<div class ="sf-carousel-pagination" ></div >
</div >
<code class ="text-1/2 color-on-surface-variant" >sf-carousel-switch--surface-inverse</code >
</div >
<div class ="flex flex-col gap-1" >
<div class ="sf-carousel carousel-demo-compact" data-label ="sf-carousel-switch--big" >
<div class ="sf-carousel-slider swiper" >
<div class ="swiper-wrapper h-full" >
<div class ="swiper-slide sf-carousel-slide p-x-1" ><div class ="bg-surface-container color-on-surface h-full flex justify-center items-center p-3 radius-3" >Слайд 1</div ></div >
<div class ="swiper-slide sf-carousel-slide p-x-1" ><div class ="bg-surface-container color-on-surface h-full flex justify-center items-center p-3 radius-3" >Слайд 2</div ></div >
<div class ="swiper-slide sf-carousel-slide p-x-1" ><div class ="bg-surface-container color-on-surface h-full flex justify-center items-center p-3 radius-3" >Слайд 3</div ></div >
</div >
</div >
<button type ="button" class ="sf-carousel-switch sf-carousel-switch--prev sf-carousel-switch--big" aria-label ="Предыдущий слайд" ><i class ="sf-icon" aria-hidden ="true" >chevron_left</i ></button >
<button type ="button" class ="sf-carousel-switch sf-carousel-switch--next sf-carousel-switch--big" aria-label ="Следующий слайд" ><i class ="sf-icon" aria-hidden ="true" >chevron_right</i ></button >
<div class ="sf-carousel-pagination" ></div >
</div >
<code class ="text-1/2 color-on-surface-variant" >sf-carousel-switch--big</code >
</div >
</div >
CSS wrap_text Wrap source lines content_copy Copy
/* Demo only: a shorter carousel, so several fit side by side. */
.sf-carousel.carousel-demo-compact {
--sf-carousel--block-size : var (--sf-f0 );
}
Пагинация
Фон пагинации по умолчанию — основной цвет.
sf-carousel-pagination--primary-container,
sf-carousel-pagination--surface-2, sf-carousel-pagination--surface-inverse
и sf-carousel-pagination--no-background меняют фон и цвет точек.
sf-carousel-pagination--big увеличивает область нажатия каждой точки до
высоты элемента управления.
HTML wrap_text Wrap source lines content_copy Copy
<div class ="grid grid-col-1 md:grid-col-2 gap-3" >
<div class ="flex flex-col gap-1" >
<div class ="sf-carousel carousel-demo-compact" data-label ="без класса фона" >
<div class ="sf-carousel-slider swiper" >
<div class ="swiper-wrapper h-full" >
<div class ="swiper-slide sf-carousel-slide p-x-1" ><div class ="bg-surface-container color-on-surface h-full flex justify-center items-center p-3 radius-3" >Слайд 1</div ></div >
<div class ="swiper-slide sf-carousel-slide p-x-1" ><div class ="bg-surface-container color-on-surface h-full flex justify-center items-center p-3 radius-3" >Слайд 2</div ></div >
<div class ="swiper-slide sf-carousel-slide p-x-1" ><div class ="bg-surface-container color-on-surface h-full flex justify-center items-center p-3 radius-3" >Слайд 3</div ></div >
</div >
</div >
<button type ="button" class ="sf-carousel-switch sf-carousel-switch--prev" aria-label ="Предыдущий слайд" ><i class ="sf-icon" aria-hidden ="true" >chevron_left</i ></button >
<button type ="button" class ="sf-carousel-switch sf-carousel-switch--next" aria-label ="Следующий слайд" ><i class ="sf-icon" aria-hidden ="true" >chevron_right</i ></button >
<div class ="sf-carousel-pagination" ></div >
</div >
<code class ="text-1/2 color-on-surface-variant" >без класса фона</code >
</div >
<div class ="flex flex-col gap-1" >
<div class ="sf-carousel carousel-demo-compact" data-label ="sf-carousel-pagination--primary-container" >
<div class ="sf-carousel-slider swiper" >
<div class ="swiper-wrapper h-full" >
<div class ="swiper-slide sf-carousel-slide p-x-1" ><div class ="bg-surface-container color-on-surface h-full flex justify-center items-center p-3 radius-3" >Слайд 1</div ></div >
<div class ="swiper-slide sf-carousel-slide p-x-1" ><div class ="bg-surface-container color-on-surface h-full flex justify-center items-center p-3 radius-3" >Слайд 2</div ></div >
<div class ="swiper-slide sf-carousel-slide p-x-1" ><div class ="bg-surface-container color-on-surface h-full flex justify-center items-center p-3 radius-3" >Слайд 3</div ></div >
</div >
</div >
<button type ="button" class ="sf-carousel-switch sf-carousel-switch--prev" aria-label ="Предыдущий слайд" ><i class ="sf-icon" aria-hidden ="true" >chevron_left</i ></button >
<button type ="button" class ="sf-carousel-switch sf-carousel-switch--next" aria-label ="Следующий слайд" ><i class ="sf-icon" aria-hidden ="true" >chevron_right</i ></button >
<div class ="sf-carousel-pagination sf-carousel-pagination--primary-container" ></div >
</div >
<code class ="text-1/2 color-on-surface-variant" >sf-carousel-pagination--primary-container</code >
</div >
<div class ="flex flex-col gap-1" >
<div class ="sf-carousel carousel-demo-compact" data-label ="sf-carousel-pagination--surface-2" >
<div class ="sf-carousel-slider swiper" >
<div class ="swiper-wrapper h-full" >
<div class ="swiper-slide sf-carousel-slide p-x-1" ><div class ="bg-surface-container color-on-surface h-full flex justify-center items-center p-3 radius-3" >Слайд 1</div ></div >
<div class ="swiper-slide sf-carousel-slide p-x-1" ><div class ="bg-surface-container color-on-surface h-full flex justify-center items-center p-3 radius-3" >Слайд 2</div ></div >
<div class ="swiper-slide sf-carousel-slide p-x-1" ><div class ="bg-surface-container color-on-surface h-full flex justify-center items-center p-3 radius-3" >Слайд 3</div ></div >
</div >
</div >
<button type ="button" class ="sf-carousel-switch sf-carousel-switch--prev" aria-label ="Предыдущий слайд" ><i class ="sf-icon" aria-hidden ="true" >chevron_left</i ></button >
<button type ="button" class ="sf-carousel-switch sf-carousel-switch--next" aria-label ="Следующий слайд" ><i class ="sf-icon" aria-hidden ="true" >chevron_right</i ></button >
<div class ="sf-carousel-pagination sf-carousel-pagination--surface-2" ></div >
</div >
<code class ="text-1/2 color-on-surface-variant" >sf-carousel-pagination--surface-2</code >
</div >
<div class ="flex flex-col gap-1" >
<div class ="sf-carousel carousel-demo-compact" data-label ="sf-carousel-pagination--surface-inverse" >
<div class ="sf-carousel-slider swiper" >
<div class ="swiper-wrapper h-full" >
<div class ="swiper-slide sf-carousel-slide p-x-1" ><div class ="bg-surface-container color-on-surface h-full flex justify-center items-center p-3 radius-3" >Слайд 1</div ></div >
<div class ="swiper-slide sf-carousel-slide p-x-1" ><div class ="bg-surface-container color-on-surface h-full flex justify-center items-center p-3 radius-3" >Слайд 2</div ></div >
<div class ="swiper-slide sf-carousel-slide p-x-1" ><div class ="bg-surface-container color-on-surface h-full flex justify-center items-center p-3 radius-3" >Слайд 3</div ></div >
</div >
</div >
<button type ="button" class ="sf-carousel-switch sf-carousel-switch--prev" aria-label ="Предыдущий слайд" ><i class ="sf-icon" aria-hidden ="true" >chevron_left</i ></button >
<button type ="button" class ="sf-carousel-switch sf-carousel-switch--next" aria-label ="Следующий слайд" ><i class ="sf-icon" aria-hidden ="true" >chevron_right</i ></button >
<div class ="sf-carousel-pagination sf-carousel-pagination--surface-inverse" ></div >
</div >
<code class ="text-1/2 color-on-surface-variant" >sf-carousel-pagination--surface-inverse</code >
</div >
<div class ="flex flex-col gap-1" >
<div class ="sf-carousel carousel-demo-compact" data-label ="sf-carousel-pagination--no-background" >
<div class ="sf-carousel-slider swiper" >
<div class ="swiper-wrapper h-full" >
<div class ="swiper-slide sf-carousel-slide p-x-1" ><div class ="bg-surface-container color-on-surface h-full flex justify-center items-center p-3 radius-3" >Слайд 1</div ></div >
<div class ="swiper-slide sf-carousel-slide p-x-1" ><div class ="bg-surface-container color-on-surface h-full flex justify-center items-center p-3 radius-3" >Слайд 2</div ></div >
<div class ="swiper-slide sf-carousel-slide p-x-1" ><div class ="bg-surface-container color-on-surface h-full flex justify-center items-center p-3 radius-3" >Слайд 3</div ></div >
</div >
</div >
<button type ="button" class ="sf-carousel-switch sf-carousel-switch--prev" aria-label ="Предыдущий слайд" ><i class ="sf-icon" aria-hidden ="true" >chevron_left</i ></button >
<button type ="button" class ="sf-carousel-switch sf-carousel-switch--next" aria-label ="Следующий слайд" ><i class ="sf-icon" aria-hidden ="true" >chevron_right</i ></button >
<div class ="sf-carousel-pagination sf-carousel-pagination--no-background" ></div >
</div >
<code class ="text-1/2 color-on-surface-variant" >sf-carousel-pagination--no-background</code >
</div >
<div class ="flex flex-col gap-1" >
<div class ="sf-carousel carousel-demo-compact" data-label ="sf-carousel-pagination--big" >
<div class ="sf-carousel-slider swiper" >
<div class ="swiper-wrapper h-full" >
<div class ="swiper-slide sf-carousel-slide p-x-1" ><div class ="bg-surface-container color-on-surface h-full flex justify-center items-center p-3 radius-3" >Слайд 1</div ></div >
<div class ="swiper-slide sf-carousel-slide p-x-1" ><div class ="bg-surface-container color-on-surface h-full flex justify-center items-center p-3 radius-3" >Слайд 2</div ></div >
<div class ="swiper-slide sf-carousel-slide p-x-1" ><div class ="bg-surface-container color-on-surface h-full flex justify-center items-center p-3 radius-3" >Слайд 3</div ></div >
</div >
</div >
<button type ="button" class ="sf-carousel-switch sf-carousel-switch--prev" aria-label ="Предыдущий слайд" ><i class ="sf-icon" aria-hidden ="true" >chevron_left</i ></button >
<button type ="button" class ="sf-carousel-switch sf-carousel-switch--next" aria-label ="Следующий слайд" ><i class ="sf-icon" aria-hidden ="true" >chevron_right</i ></button >
<div class ="sf-carousel-pagination sf-carousel-pagination--big" ></div >
</div >
<code class ="text-1/2 color-on-surface-variant" >sf-carousel-pagination--big</code >
</div >
</div >
CSS wrap_text Wrap source lines content_copy Copy
/* Demo only: a shorter carousel, so several fit side by side. */
.sf-carousel.carousel-demo-compact {
--sf-carousel--block-size : var (--sf-f0 );
}
Автопрокрутка
Автопрокрутку включает data-autoplay="true", но только вместе с кнопкой
sf-carousel-rotation и атрибутами data-play-label и data-pause-label —
именами кнопки в двух состояниях. Без них карусель не прокручивается сама.
data-delay задаёт паузу между слайдами в миллисекундах (от 1000, по
умолчанию 5000). Наведение указателя и фокус внутри карусели останавливают
прокрутку, кнопка останавливает и запускает её.
Акция 1
Краткое описание 1-го слайда.
Акция 2
Краткое описание 2-го слайда.
Акция 3
Краткое описание 3-го слайда.
pause chevron_left chevron_right HTML wrap_text Wrap source lines content_copy Copy
<div class ="sf-carousel" data-label ="Акции недели" data-autoplay ="true" data-delay ="4000" data-loop ="true" data-play-label ="Запустить автопрокрутку" data-pause-label ="Остановить автопрокрутку" >
<div class ="sf-carousel-slider swiper" >
<div class ="swiper-wrapper h-full" >
<article class ="swiper-slide sf-carousel-slide p-x-1" >
<div class ="bg-surface-container color-on-surface h-full flex flex-col justify-center items-center p-3 radius-3" >
<strong >Акция 1</strong >
<p class ="m-0 color-on-surface-variant" >Краткое описание 1-го слайда.</p >
</div >
</article >
<article class ="swiper-slide sf-carousel-slide p-x-1" >
<div class ="bg-surface-container color-on-surface h-full flex flex-col justify-center items-center p-3 radius-3" >
<strong >Акция 2</strong >
<p class ="m-0 color-on-surface-variant" >Краткое описание 2-го слайда.</p >
</div >
</article >
<article class ="swiper-slide sf-carousel-slide p-x-1" >
<div class ="bg-surface-container color-on-surface h-full flex flex-col justify-center items-center p-3 radius-3" >
<strong >Акция 3</strong >
<p class ="m-0 color-on-surface-variant" >Краткое описание 3-го слайда.</p >
</div >
</article >
</div >
</div >
<button type ="button" class ="sf-carousel-rotation" ><i class ="sf-icon" aria-hidden ="true" >pause</i ></button >
<button type ="button" class ="sf-carousel-switch sf-carousel-switch--prev" aria-label ="Предыдущий слайд" ><i class ="sf-icon" aria-hidden ="true" >chevron_left</i ></button >
<button type ="button" class ="sf-carousel-switch sf-carousel-switch--next" aria-label ="Следующий слайд" ><i class ="sf-icon" aria-hidden ="true" >chevron_right</i ></button >
<div class ="sf-carousel-pagination" ></div >
</div >
Доступность
Скрипт ставит на блок aria-roledescription="carousel" и роль region,
если задано имя (data-label или aria-label), иначе — group. Задавайте
имя всегда.
Каждый слайд получает role="group", aria-roledescription="slide" и имя
вида «2 / 3»; скрытые слайды — aria-hidden="true" и inert, поэтому их
ссылки и кнопки не получают фокус.
Переключателям нужны доступные имена: «Предыдущий слайд», «Следующий
слайд». Иконка внутри них — aria-hidden="true".
Пока автопрокрутка идёт, область слайдов не объявляет смену слайда; на
паузе — объявляет вежливо (aria-live="polite"). Кнопка автопрокрутки
получает aria-pressed и имя из data-play-label или data-pause-label.
При системной настройке уменьшения движения слайды сменяются без анимации, а
автопрокрутка не запускается.
JavaScript
При каждой смене слайда и запуске или остановке автопрокрутки на блоке
возникает всплывающее событие sf:carousel-change с полями index (номер
слайда с нуля) и playing в detail.
JavaScript wrap_text Wrap source lines content_copy Copy
document.addEventListener ('sf:carousel-change' , (event ) => {
console.log (event.detail.index, event.detail.playing);
});
Функции SF.Carousel принимают блок .sf-carousel:
Функция
Что делает
next(root), previous(root)перелистывает на слайд вперёд или назад
goTo(root, index)показывает слайд с номером index, с нуля
play(root), pause(root)запускает и останавливает автопрокрутку
getState(root)возвращает {index, playing}
refresh(root)пересчитывает карусель после добавления или удаления слайдов
bind(root), unbind(root)подключает карусель к разметке и снимает её
Классы
Что
Классы
Блок
sf-carousel
Части
sf-carousel-pagination, sf-carousel-pagination--big, sf-carousel-pagination--no-background, sf-carousel-pagination--primary-container, sf-carousel-pagination--surface-2, sf-carousel-pagination--surface-inverse, sf-carousel-pagination-item, sf-carousel-pagination-item--active, sf-carousel-rotation, sf-carousel-slide, sf-carousel-slider, sf-carousel-switch, sf-carousel-switch--big, sf-carousel-switch--left, sf-carousel-switch--next, sf-carousel-switch--prev, sf-carousel-switch--right, sf-carousel-switch--secondary-container, sf-carousel-switch--surface-inverse, sf-carousel-switch--surface-zero
Классы и переменные собраны из CSS выпуска и обновляются вместе с ним.
Переменные
Компонент читает свои переменные, а модификаторы задают им значения; таблица показывает, из чего складывается вид. Переменные компонента — его внутренняя проводка, а не поверхность настройки: их имена и устройство могут меняться. Вид проекта меняют общие токены, а глубокий вид Smart-компонента — его шаблон (см. Переменные компонента ). Значение по умолчанию — из базового правила блока (.sf-carousel); переменную без него задают только модификаторы.
Переменная
По умолчанию
Задаёт
--sf-carousel--block-sizevar(--sf-g3)height, block-size
--sf-carousel-control--background-colorvar(--sf-primary)background-color
--sf-carousel-control--colorvar(--sf-on-primary)color
--sf-carousel-pagination--background-colorvar(--sf-primary)background-color
--sf-carousel-pagination-item--colorvar(--sf-on-primary)color
См. также
Предыдущая Подсказка Следующая Swiper
