Для переключения контента без делимитеров и автопрокрутки возьмите CdsSlideView, на котором построена карусель, а для одиночного изображения — CdsImage.

Анатомия

Карусель складывается из слайдов, стрелок навигации, точек-делимитеров и опционального прогресс-бара. Стрелки и точки листают по кругу: после последнего слайда идёт первый.

Storybook

Вариации

Изображения

CdsCarouselItem объединяет слайд и CdsImage — передавайте ему любые пропсы изображения: src, alt, cover, gradient. Высоту карусели задаёт проп height (по умолчанию 500).

Sandbox Storybook

<script setup lang="ts">
import { CdsCarousel, CdsCarouselItem } from '@central-design-system/components';
import { ref } from 'vue';

const slide = ref(0);

const slides = [
  { src: '/images/temp/city.webp', alt: 'Вечерний город' },
  { src: '/images/temp/desert.webp', alt: 'Столовые горы на закате' },
  { src: '/images/temp/ny.webp', alt: 'Улицы Нью-Йорка' },
  { src: '/images/temp/space.webp', alt: 'Звёздное небо' }
];
</script>

<template>
  <CdsCarousel v-model="slide" height="360" class="m-auto max-w-[640px]">
    <CdsCarouselItem v-for="item in slides" :key="item.src" :src="item.src" :alt="item.alt" cover />
  </CdsCarousel>
</template>

Произвольный контент

Слайд не обязан быть картинкой: положите в слот CdsCarouselItem любую разметку — она растянется на весь кадр.

Sandbox Storybook

<script setup lang="ts">
import { CdsCarousel, CdsCarouselItem } from '@central-design-system/components';

const slides = [
  { text: 'Первый слайд', class: 'bg-brand-primary' },
  { text: 'Второй слайд', class: 'bg-status-progress-fill' },
  { text: 'Третий слайд', class: 'bg-surface-inverse' }
];
</script>

<template>
  <CdsCarousel height="220" class="m-auto max-w-[520px]">
    <CdsCarouselItem v-for="slide in slides" :key="slide.text">
      <div class="flex h-full items-center justify-center text-500 text-content-on-dark" :class="slide.class">
        {{ slide.text }}
      </div>
    </CdsCarouselItem>
  </CdsCarousel>
</template>

Автопрокрутка

Проп cycle листает слайды автоматически, interval задаёт паузу в миллисекундах (по умолчанию 6000). Таймер перезапускается после ручного переключения — пользователь всегда успевает досмотреть слайд.

Sandbox Storybook

<script setup lang="ts">
import { CdsCarousel, CdsCarouselItem } from '@central-design-system/components';

const slides = [
  { src: '/images/temp/city.webp', alt: 'Вечерний город' },
  { src: '/images/temp/desert.webp', alt: 'Столовые горы на закате' },
  { src: '/images/temp/space.webp', alt: 'Звёздное небо' }
];
</script>

<template>
  <CdsCarousel cycle :interval="3000" height="220" class="m-auto max-w-[520px]">
    <CdsCarouselItem v-for="item in slides" :key="item.src" :src="item.src" :alt="item.alt" cover />
  </CdsCarousel>
</template>

Прогресс

Проп progress добавляет прогресс-бар позиции внизу карусели. Значение-строка задаёт цвет — любой из токенов, которые принимает CdsProgressBar.

Sandbox Storybook

<script setup lang="ts">
import { CdsCarousel, CdsCarouselItem } from '@central-design-system/components';

const slides = [
  { src: '/images/temp/city.webp', alt: 'Вечерний город' },
  { src: '/images/temp/desert.webp', alt: 'Столовые горы на закате' },
  { src: '/images/temp/space.webp', alt: 'Звёздное небо' }
];
</script>

<template>
  <div class="flex flex-wrap items-start justify-center gap-6">
    <div class="flex flex-col items-center gap-1">
      <CdsCarousel progress hide-delimiters height="180" class="w-[280px]">
        <CdsCarouselItem v-for="item in slides" :key="item.src" :src="item.src" :alt="item.alt" cover />
      </CdsCarousel>
      <span class="text-100 text-content-secondary">progress</span>
    </div>

    <div class="flex flex-col items-center gap-1">
      <CdsCarousel progress="brand-primary" hide-delimiters height="180" class="w-[280px]">
        <CdsCarouselItem v-for="item in slides" :key="item.src" :src="item.src" :alt="item.alt" cover />
      </CdsCarousel>
      <span class="text-100 text-content-secondary">progress="brand-primary"</span>
    </div>
  </div>
</template>

Делимитеры

Пропы управляют точками навигации: hide-delimiters убирает их совсем, hide-delimiter-background — только подложку, vertical-delimiters (left / right) ставит точки вертикально у края, delimiter-icon меняет иконку точки.

Sandbox Storybook

<script setup lang="ts">
import { CdsCarousel, CdsCarouselItem } from '@central-design-system/components';

const slides = [
  { src: '/images/temp/city.webp', alt: 'Вечерний город' },
  { src: '/images/temp/desert.webp', alt: 'Столовые горы на закате' },
  { src: '/images/temp/space.webp', alt: 'Звёздное небо' }
];
</script>

<template>
  <div class="flex flex-wrap items-start justify-center gap-6">
    <div class="flex flex-col items-center gap-1">
      <CdsCarousel hide-delimiter-background height="180" class="w-[280px]">
        <CdsCarouselItem v-for="item in slides" :key="item.src" :src="item.src" :alt="item.alt" cover />
      </CdsCarousel>
      <span class="text-100 text-content-secondary">hide-delimiter-background</span>
    </div>

    <div class="flex flex-col items-center gap-1">
      <CdsCarousel vertical-delimiters="right" hide-delimiter-background height="180" class="w-[280px]">
        <CdsCarouselItem v-for="item in slides" :key="item.src" :src="item.src" :alt="item.alt" cover />
      </CdsCarousel>
      <span class="text-100 text-content-secondary">vertical-delimiters="right"</span>
    </div>
  </div>
</template>

Слот item заменяет точку своим элементом: он получает готовые пропсы делимитера (клик, aria-label, класс активности) и сам элемент группы — останется только развесить их через v-bind.

Sandbox Storybook

<script setup lang="ts">
import { CdsButton, CdsCarousel, CdsCarouselItem } from '@central-design-system/components';
import { ref } from 'vue';

const slide = ref(0);

const slides = [
  { src: '/images/temp/city.webp', alt: 'Вечерний город' },
  { src: '/images/temp/desert.webp', alt: 'Столовые горы на закате' },
  { src: '/images/temp/space.webp', alt: 'Звёздное небо' }
];
</script>

<template>
  <CdsCarousel v-model="slide" height="220" class="m-auto max-w-[520px]">
    <CdsCarouselItem v-for="item in slides" :key="item.src" :src="item.src" :alt="item.alt" cover />

    <template #item="{ props: itemProps, item }">
      <CdsButton
        v-bind="itemProps"
        size="sm"
        variant="solid"
        :color="slide === item.value ? 'brand' : 'inverse'"
        :text="String(Number(item.value) + 1)"
      />
    </template>
  </CdsCarousel>
</template>

Стрелки

Пропы стрелок наследуются от CdsSlideView: show-arrows="hover" показывает их только при наведении, :show-arrows="false" убирает совсем, prev-icon / next-icon меняют иконки, а слоты prev / next — сами кнопки.

Sandbox Storybook

<script setup lang="ts">
import { CdsCarousel, CdsCarouselItem } from '@central-design-system/components';

const slides = [
  { src: '/images/temp/city.webp', alt: 'Вечерний город' },
  { src: '/images/temp/desert.webp', alt: 'Столовые горы на закате' },
  { src: '/images/temp/space.webp', alt: 'Звёздное небо' }
];
</script>

<template>
  <CdsCarousel show-arrows="hover" height="220" class="m-auto max-w-[520px]">
    <CdsCarouselItem v-for="item in slides" :key="item.src" :src="item.src" :alt="item.alt" cover />
  </CdsCarousel>
</template>

Рекомендации

Storybook

Сценарии использования

Промо-баннеры

Классическая ротация баннеров: cycle с interval в 5 секунд листает сам, progress показывает, когда сменится слайд. Текст и кнопка лежат в слоте слайда, а gradient из CdsImage затемняет верх кадра под ними — так они читаются на любом изображении.

Sandbox Storybook

<script setup lang="ts">
import { CdsButton, CdsCarousel, CdsCarouselItem } from '@central-design-system/components';

const banners = [
  {
    src: '/images/temp/city.webp',
    alt: 'Вечерний город',
    title: 'Городские туры выходного дня',
    text: 'Скидка 20% на все маршруты до конца месяца'
  },
  {
    src: '/images/temp/villa.webp',
    alt: 'Вилла с бассейном',
    title: 'Виллы у моря',
    text: 'Раннее бронирование лета — уже открыто'
  },
  {
    src: '/images/temp/desert.webp',
    alt: 'Столовые горы на закате',
    title: 'Экспедиции в пустыню',
    text: 'Небольшие группы, опытные гиды'
  }
];
</script>

<template>
  <CdsCarousel cycle :interval="5000" progress height="280" class="m-auto max-w-[640px]">
    <CdsCarouselItem
      v-for="banner in banners"
      :key="banner.src"
      :src="banner.src"
      :alt="banner.alt"
      gradient="to bottom, rgba(0, 0, 0, 0.7), transparent 60%"
      cover
    >
      <div class="flex w-full items-start justify-between gap-2 p-4">
        <div>
          <p class="text-500 font-bold text-content-on-dark">{{ banner.title }}</p>
          <p class="text-200 text-content-on-dark">{{ banner.text }}</p>
        </div>
        <CdsButton text="Подробнее" size="sm" />
      </div>
    </CdsCarouselItem>
  </CdsCarousel>
</template>

Галерея с миниатюрами

Точки заменены миниатюрами: hide-delimiters убирает штатные делимитеры, а клик по миниатюре меняет v-model. Счётчик рядом считает слайды от того же v-model — карусель, миниатюры и счётчик всегда синхронны.

Sandbox Storybook

<script setup lang="ts">
import { CdsCarousel, CdsCarouselItem, CdsImage } from '@central-design-system/components';
import { ref } from 'vue';

const slide = ref(0);

const photos = [
  { src: '/images/temp/villa.webp', alt: 'Вилла с бассейном' },
  { src: '/images/temp/airbnb.webp', alt: 'Гостиная с камином' },
  { src: '/images/temp/ny.webp', alt: 'Вид на город из окна' },
  { src: '/images/temp/wallpaper.webp', alt: 'Озеро рядом с виллой' }
];
</script>

<template>
  <div class="m-auto flex w-[480px] flex-col gap-2">
    <CdsCarousel v-model="slide" hide-delimiters height="280">
      <CdsCarouselItem v-for="photo in photos" :key="photo.src" :src="photo.src" :alt="photo.alt" cover />
    </CdsCarousel>

    <div class="flex items-center justify-between">
      <div class="flex gap-1">
        <button
          v-for="(photo, index) in photos"
          :key="photo.src"
          type="button"
          class="cursor-pointer overflow-hidden rounded-100 border-2 border-solid p-0"
          :class="slide === index ? 'border-brand-primary' : 'border-transparent'"
          :aria-label="photo.alt"
          @click="slide = index"
        >
          <CdsImage :src="photo.src" :alt="''" width="56" height="42" cover />
        </button>
      </div>
      <span class="text-200 text-content-secondary">{{ slide + 1 }} / {{ photos.length }}</span>
    </div>
  </div>
</template>

Вертикальная лента

Лента историй в духе соцсетей: direction="vertical" листает кадры сверху вниз, vertical-arrows="left" и vertical-delimiters="right" разводят стрелки и точки по боковым краям, освобождая кадр. Карточка автора и счётчик лежат в абсолютном слое поверх карусели: pointer-events-none пропускает клики к стрелкам, а транзишен по ключу v-model меняет карточку вместе со слайдом.

Sandbox Storybook

<script setup lang="ts">
import { CdsAvatar, CdsCarousel, CdsCarouselItem, CdsTag } from '@central-design-system/components';
import { computed, ref } from 'vue';

const slide = ref(0);

const stories = [
  {
    src: '/images/temp/space.webp',
    alt: 'Звёздное небо',
    author: 'Марина Соколова',
    followers: '31 тыс. подписчиков',
    avatar: 'https://i.pravatar.cc/80?img=47'
  },
  {
    src: '/images/temp/desert.webp',
    alt: 'Столовые горы на закате',
    author: 'Григорий Ковалёв',
    followers: '412 подписчиков',
    avatar: 'https://i.pravatar.cc/80?img=59'
  },
  {
    src: '/images/temp/city.webp',
    alt: 'Вечерний город',
    author: 'Эмма Королёва',
    followers: '521 подписчик',
    avatar: 'https://i.pravatar.cc/80?img=44'
  },
  {
    src: '/images/temp/cat.webp',
    alt: 'Рыжий кот',
    author: 'Антон Макаров',
    followers: '6 тыс. подписчиков',
    avatar: 'https://i.pravatar.cc/80?img=68'
  }
];

const current = computed(() => stories[slide.value]);
</script>

<template>
  <div class="relative m-auto max-w-[560px] overflow-hidden rounded-200">
    <CdsCarousel
      v-model="slide"
      direction="vertical"
      vertical-arrows="left"
      vertical-delimiters="right"
      hide-delimiter-background
      progress
      height="360"
    >
      <CdsCarouselItem v-for="story in stories" :key="story.src" :src="story.src" :alt="story.alt" cover />
    </CdsCarousel>

    <div class="pointer-events-none absolute inset-0 z-10 flex flex-col items-center justify-between py-4">
      <Transition name="jump-transition-right" mode="out-in" appear>
        <div :key="slide" class="flex items-center gap-2 rounded-full bg-surface-primary p-1 pr-4">
          <CdsAvatar :image="current.avatar" />
          <div>
            <p class="text-200 font-bold text-content-primary">{{ current.author }}</p>
            <p class="text-100 text-content-secondary">{{ current.followers }}</p>
          </div>
        </div>
      </Transition>

      <CdsTag :text="`${slide + 1} / ${stories.length}`" size="sm" />
    </div>
  </div>
</template>

Онбординг

Шаги знакомства с продуктом: стрелки выключены (:show-arrows="false"), движение контролируют кнопки «Назад» и «Далее» через v-model. На последнем шаге «Далее» превращается в призыв к действию.

Sandbox Storybook

<script setup lang="ts">
import { CdsButton, CdsCarousel, CdsCarouselItem, CdsIcon } from '@central-design-system/components';
import { computed, ref } from 'vue';

const slide = ref(0);

const steps = [
  { icon: 'search', title: 'Ищите быстрее', text: 'Единый поиск по проектам, файлам и обсуждениям.' },
  {
    icon: 'notification',
    title: 'Ничего не пропускайте',
    text: 'Уведомления о важных событиях — там, где вам удобно.'
  },
  { icon: 'trophy', title: 'Отмечайте прогресс', text: 'Дашборд покажет, как продвигается работа команды.' }
];

const isLast = computed(() => slide.value === steps.length - 1);
</script>

<template>
  <div class="m-auto flex w-[420px] flex-col gap-2">
    <CdsCarousel v-model="slide" :show-arrows="false" hide-delimiter-background height="220">
      <CdsCarouselItem v-for="step in steps" :key="step.title">
        <div class="flex h-full flex-col items-center justify-center gap-2 bg-surface-secondary px-8 text-center">
          <CdsIcon :icon="step.icon" :size="32" />
          <p class="text-400 font-bold text-content-primary">{{ step.title }}</p>
          <p class="text-200 text-content-secondary">{{ step.text }}</p>
        </div>
      </CdsCarouselItem>
    </CdsCarousel>

    <div class="flex justify-between">
      <CdsButton variant="soft" color="neutral" text="Назад" :disabled="slide === 0" @click="slide -= 1" />
      <CdsButton v-if="!isLast" text="Далее" @click="slide += 1" />
      <CdsButton v-else text="Начать работу" @click="slide = 0" />
    </div>
  </div>
</template>

API

CdsCarousel

Пропсы

Имя	Тип	По умолчанию	Описание
color	string | undefined	—	Цвет активного делимитера и прогресс-бара
continuous	boolean | undefined	true	Зацикливает перелистывание: с последнего слайда переход ведёт на первый и наоборот
crossfade	boolean | undefined	—	Слайды сменяются плавным перекрестным затуханием вместо сдвига
cycle	boolean | undefined	—	Автоматическое переключение слайдов через заданный интервал
delimiterIcon	IconValue | undefined	'dot'	Иконка делимитера (точки навигации)
direction	"horizontal" | "vertical" | undefined	'horizontal'	Переключение между горизонтальным или вертикальным отображением.
disabled	boolean | null | undefined	null	Заблокированное состояние
height	string | number | undefined	500	Высота карусели
hideDelimiterBackground	boolean | undefined	—	Скрыть подложку под делимитерами
hideDelimiters	boolean | undefined	—	Скрыть делимитеры (точки навигации)
interval	string | number | undefined	6000	Интервал автопереключения слайдов в миллисекундах (при включённом cycle)
mandatory	boolean | "force" | undefined	'force'	Обязательный выбор хотя бы одного элемента
max	number | undefined	—	Максимальное количество выбираемых элементов
modelValue	any	—	Значение выбранных элементов группы
multiple	boolean | undefined	—	Разрешить множественный выбор
nextIcon	IconValue | undefined	'chevron-right'	Иконка кнопки перехода к следующему слайду
prevIcon	IconValue | undefined	'chevron-left'	Иконка кнопки перехода к предыдущему слайду
progress	string | boolean | undefined	—	Отображать прогресс-бар текущего слайда. Строка задаёт цвет прогресс-бара
required	boolean | "force" | undefined	—	Обязательный выбор хотя бы одного элемента
reverse	boolean | undefined	—	Инвертирует направление анимации перехода между слайдами
selectedClass	string | undefined	—	CSS класс для выбранного состояния
showArrows	string | boolean | undefined	true	Показывает стрелки навигации. 'hover' — только при наведении на компонент
tag	string | JSXComponent<any> | undefined	'div'	Пользовательский HTML-тег для отображения
theme	string | undefined	—	Тема компонента
touch	boolean | TouchHandlers | undefined	—	Управление перелистыванием свайпом: false отключает жесты, объект задаёт собственные обработчики касаний
transitionDuration	number | undefined	—	Длительность анимации перехода между слайдами в миллисекундах
verticalArrows	boolean | "left" | "right" | undefined	—	Размещает стрелки навигации вертикально: 'left' или 'right' — сторона, true — сторона по умолчанию
verticalDelimiters	boolean | "left" | "right" | undefined	—	Вертикальное расположение делимитеров: left, right или true (слева)

События

Имя	Тип	Описание
update:modelValue	[]	Срабатывает при смене активного слайда.

Слоты

Имя	Тип	Описание
default	{ group: GroupProvide; }	Слайды. В параметрах — состояние группы для управления активным слайдом
item	{ props: CarouselDelimiterProps; item: { id: string; value: unknown; disabled: boolean | undefined; }; }	Кастомный делимитер (точка навигации) для каждого слайда.
next	{ props: ControlProps; }	Кнопка перехода к следующему слайду. В параметрах — готовые пропсы для своей кнопки
prev	{ props: ControlProps; }	Кнопка перехода к предыдущему слайду. В параметрах — готовые пропсы для своей кнопки

CdsCarouselItem

Пропсы

Имя	Тип	По умолчанию	Описание
absolute	boolean | undefined	—	Позиционирует изображение как position: absolute, заполняя родителя.
alt	string | undefined	—	Альтернативный текст изображения (атрибут alt).
aspectRatio	string | number | undefined	—	Соотношение сторон контента. Например 1.7778 (16/9) или '4/3'.
color	string | undefined	—	Цвет фона-плейсхолдера, отображаемого во время загрузки.
contentClass	any	—	CSS-класс, применяемый к обёртке контента.
cover	boolean | undefined	—	Масштабирует изображение, чтобы оно полностью закрывало контейнер (object-fit: cover).
crossorigin	"" | "anonymous" | "use-credentials" | undefined	—	Значение атрибута crossorigin.
disabled	boolean | null | undefined	null	Заблокированное состояние
draggable	boolean | "true" | "false" | undefined	—	Управляет возможностью перетаскивания изображения (атрибут draggable).
eager	boolean | undefined	—	Принудительно рендерит содержимое компонента при его использовании. Это полезно, если у вас есть контент, который не отображается в DOM, но который необходимо проиндексировать для SEO.
gradient	string | undefined	—	CSS-градиент, накладываемый поверх изображения. Например 'to top, rgba(0,0,0,.4), transparent'.
height	string | number | undefined	—	Высота компонента
imageClass	any	—	CSS-класс, применяемый к внутреннему элементу <img>.
inline	boolean | undefined	—	Отображает компонент как inline-блок (inline-flex) вместо блочного.
lazySrc	string | undefined	—	Источник изображения-заглушки низкого качества, показываемого до загрузки основного.
maxHeight	string | number | undefined	—	Максимальная высота компонента
maxWidth	string | number | undefined	—	Максимальная ширина компонента
minHeight	string | number | undefined	—	Минимальная высота компонента
minWidth	string | number | undefined	—	Минимальная ширина компонента
options	IntersectionObserverInit | undefined	{}	Опции IntersectionObserver для ленивой загрузки.
position	string | undefined	—	Значение object-position для позиционирования изображения внутри контейнера.
referrerpolicy	"origin" | "no-referrer" | "no-referrer-when-downgrade" | "origin-when-cross-origin" | "same-origin" | "strict-origin" | "strict-origin-when-cross-origin" | "unsafe-url" | undefined	—	Значение атрибута referrerpolicy.
reverseTransition	string | boolean | undefined	—	Переход при показе слайда в обратном направлении. Имя transition-компонента или false, чтобы отключить анимацию
selectedClass	string | undefined	—	CSS класс для выбранного состояния
sizes	string | undefined	—	Значение атрибута sizes для адаптивных изображений.
src	string | CdsImageSrcObject | undefined	''	Источник изображения. Строка или объект с src/srcset/lazySrc/aspect.
srcset	string | undefined	—	Набор источников изображения для разных разрешений (атрибут srcset).
theme	string | undefined	—	Тема компонента
transition	string | boolean | undefined	—	Переход при показе слайда в прямом направлении. Имя transition-компонента или false, чтобы отключить анимацию
value	any	—	Значение компонента в группе
width	string | number | undefined	—	Ширина компонента

Слоты

Имя	Тип	Описание
default	any	Контент, отображаемый поверх изображения.
error	any	Содержимое, отображаемое при ошибке загрузки изображения.
placeholder	any	Содержимое, отображаемое во время загрузки изображения.
sources	any	Дополнительные элементы <source> для тега <picture>.