Для карусели изображений с точками-делимитерами и автопрокруткой возьмите готовый CdsCarousel, для разделов с панелью навигации — CdsTabs, а для ленты, где видно сразу несколько элементов, — CdsSlideGroup.

Анатомия

Контейнер показывает один активный слайд CdsSlideViewItem, стрелки по краям листают к соседним — их включает проп show-arrows. v-model хранит индекс активного слайда — или значение из пропа value слайда, если он задан.

Storybook

Вариации

Стрелки

По умолчанию стрелок нет — слайды листаются свайпом на тач-устройствах или программно через v-model. Проп show-arrows включает стрелки: true показывает их всегда, "hover" — только при наведении на слайд. Вместе со стрелками появляется и навигация с клавиатуры. Свайп отключается через :touch="false", иконки стрелок меняются пропами prev-icon и next-icon.

Sandbox Storybook

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

const slide = ref(0);
</script>

<template>
  <CdsSlideView v-model="slide" show-arrows="hover" continuous class="m-auto max-w-[520px]">
    <CdsSlideViewItem v-for="n in 4" :key="n">
      <div class="flex h-[180px] items-center justify-center bg-surface-secondary text-500">Слайд {{ n }}</div>
    </CdsSlideViewItem>
  </CdsSlideView>
</template>

Вертикальные стрелки

Проп vertical-arrows собирает включённые через show-arrows стрелки в колонку у края слайда: true или 'left' — слева, 'right' — справа.

Sandbox Storybook

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

const slide = ref(0);
</script>

<template>
  <CdsSlideView v-model="slide" show-arrows vertical-arrows="right" continuous class="m-auto max-w-[520px]">
    <CdsSlideViewItem v-for="n in 4" :key="n">
      <div class="flex h-[180px] items-center justify-center bg-surface-secondary text-500">Слайд {{ n }}</div>
    </CdsSlideViewItem>
  </CdsSlideView>
</template>

Непрерывное листание

Проп continuous замыкает слайды в кольцо: после последнего идёт первый. Без него на крайних слайдах соответствующая стрелка скрывается.

Sandbox Storybook

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

const slide = ref(0);
</script>

<template>
  <CdsSlideView v-model="slide" show-arrows continuous class="m-auto max-w-[520px]">
    <CdsSlideViewItem v-for="n in 4" :key="n">
      <div class="flex h-[180px] items-center justify-center bg-surface-secondary text-500">Слайд {{ n }}</div>
    </CdsSlideViewItem>
  </CdsSlideView>
</template>

Направление

Проп direction="vertical" двигает слайды по вертикали — вместе с анимацией меняются и клавиши навигации: вместо ← / → работают ↑ / ↓.

Sandbox Storybook

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

const slide = ref(0);
</script>

<template>
  <CdsSlideView v-model="slide" show-arrows direction="vertical" continuous class="m-auto max-w-[520px]">
    <CdsSlideViewItem v-for="n in 4" :key="n">
      <div class="flex h-[180px] items-center justify-center bg-surface-secondary text-500">Слайд {{ n }}</div>
    </CdsSlideViewItem>
  </CdsSlideView>
</template>

Переходы

Проп crossfade заменяет сдвиг плавным растворением — подходит, когда слайды не выстроены в последовательность. У отдельного CdsSlideViewItem анимация настраивается пропами transition и reverse-transition: имя своей transition-анимации или false, чтобы отключить. Контент слайда рендерится при первом показе; проп eager рендерит его сразу — полезно для SEO.

Sandbox Storybook

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

const slide = ref(0);
</script>

<template>
  <CdsSlideView v-model="slide" show-arrows crossfade continuous class="m-auto max-w-[520px]">
    <CdsSlideViewItem v-for="n in 4" :key="n">
      <div class="flex h-[180px] items-center justify-center bg-surface-secondary text-500">Слайд {{ n }}</div>
    </CdsSlideViewItem>
  </CdsSlideView>
</template>

Слоты

Слот	Описание
default	Слайды CdsSlideViewItem
prev, next	Свои кнопки листания; получают props с onClick и aria-label
additional	Контент после слайдов: индикаторы, счётчик, подписи

Слот additional получает group с методами выбора — но чаще достаточно внешнего v-model, как в демо с точками-индикаторами.

Sandbox Storybook

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

const slide = ref(0);
const total = 4;
</script>

<template>
  <CdsSlideView v-model="slide" show-arrows continuous class="m-auto max-w-[520px]">
    <template #prev="{ props }">
      <CdsButton variant="soft" color="brand" size="sm" icon="chevron-left" aria-label="Назад" @click="props.onClick" />
    </template>

    <CdsSlideViewItem v-for="n in total" :key="n">
      <div class="flex h-[180px] items-center justify-center bg-surface-secondary text-500">Слайд {{ n }}</div>
    </CdsSlideViewItem>

    <template #next="{ props }">
      <CdsButton
        variant="soft"
        color="brand"
        size="sm"
        icon="chevron-right"
        aria-label="Вперёд"
        @click="props.onClick"
      />
    </template>

    <template #additional>
      <div class="mt-2 flex justify-center gap-1">
        <button
          v-for="n in total"
          :key="n"
          type="button"
          class="h-[8px] w-[8px] cursor-pointer rounded-full border-none p-0"
          :class="slide === n - 1 ? 'bg-brand-primary' : 'bg-surface-secondary'"
          :aria-label="`Слайд ${n}`"
          @click="slide = n - 1"
        />
      </div>
    </template>
  </CdsSlideView>
</template>

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

Storybook

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

Пошаговая форма

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

Sandbox Storybook

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

const step = ref(0);
const total = 3;

const name = ref('');
const email = ref('');
const company = ref('');
</script>

<template>
  <div class="m-auto flex w-full max-w-[400px] flex-col gap-2">
    <span class="text-200 text-content-secondary">Шаг {{ step + 1 }} из {{ total }}</span>

    <CdsSlideView v-model="step" :touch="false">
      <CdsSlideViewItem>
        <div class="flex flex-col gap-2">
          <CdsTextInput v-model="name" label="Имя" placeholder="Александра" />
          <CdsTextInput v-model="email" label="Рабочая почта" placeholder="name@company.ru" />
        </div>
      </CdsSlideViewItem>

      <CdsSlideViewItem>
        <div class="flex flex-col gap-2">
          <CdsTextInput v-model="company" label="Компания" placeholder="ООО «Ромашка»" />
        </div>
      </CdsSlideViewItem>

      <CdsSlideViewItem>
        <div class="rounded-200 bg-surface-secondary p-4">
          <p class="m-0 text-200">Проверьте данные перед отправкой:</p>
          <p class="m-0 mt-1 text-200 text-content-secondary">
            {{ name || 'Имя не указано' }} · {{ email || 'почта не указана' }} · {{ company || 'компания не указана' }}
          </p>
        </div>
      </CdsSlideViewItem>
    </CdsSlideView>

    <div class="flex justify-between">
      <CdsButton variant="soft" color="brand" text="Назад" :disabled="step === 0" @click="step--" />
      <CdsButton v-if="step < total - 1" text="Далее" @click="step++" />
      <CdsButton v-else text="Отправить" />
    </div>
  </div>
</template>

Отзывы клиентов

Цитаты не выстроены в последовательность, поэтому вместо сдвига — crossfade. Стрелки появляются при наведении (show-arrows="hover"), позицию показывает счётчик в слоте additional, а continuous листает отзывы по кругу.

Sandbox Storybook

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

const slide = ref(0);

const reviews = [
  {
    text: 'Перевели закупки в электронный вид за две недели — поставщики подключились без единого звонка в поддержку.',
    author: 'Мария, директор по закупкам'
  },
  {
    text: 'Удобно сравнивать предложения: все документы и цены собраны в одном месте.',
    author: 'Игорь, руководитель отдела снабжения'
  },
  {
    text: 'Интеграция с нашей учётной системой заняла один день. Теперь заявки уходят автоматически.',
    author: 'Светлана, ИТ-директор'
  }
];
</script>

<template>
  <CdsSlideView v-model="slide" crossfade continuous show-arrows="hover" class="m-auto max-w-[520px]">
    <CdsSlideViewItem v-for="review in reviews" :key="review.author">
      <figure class="m-0 flex h-[200px] flex-col justify-center gap-2 rounded-200 bg-surface-secondary px-12">
        <blockquote class="m-0 text-300">«{{ review.text }}»</blockquote>
        <figcaption class="text-200 text-content-secondary">{{ review.author }}</figcaption>
      </figure>
    </CdsSlideViewItem>

    <template #additional>
      <p class="m-0 mt-1 text-center text-200 text-content-secondary">{{ slide + 1 }} / {{ reviews.length }}</p>
    </template>
  </CdsSlideView>
</template>

Лента событий

Компактный виджет с вертикальным листанием: direction="vertical" двигает события снизу вверх, vertical-arrows="right" собирает стрелки в колонку у правого края.

Sandbox Storybook

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

const slide = ref(0);

const events = [
  { icon: 'notification', text: 'Новая заявка № 142 от ООО «Ромашка»', time: '2 минуты назад' },
  { icon: 'message', text: 'Поставщик ответил на вопрос по лоту № 7', time: '15 минут назад' },
  { icon: 'file', text: 'Подписан договор по закупке № 89', time: 'час назад' },
  { icon: 'trophy', text: 'Определён победитель тендера № 56', time: '3 часа назад' }
];
</script>

<template>
  <CdsSlideView
    v-model="slide"
    show-arrows
    direction="vertical"
    vertical-arrows="right"
    continuous
    class="m-auto max-w-[440px]"
  >
    <CdsSlideViewItem v-for="event in events" :key="event.text">
      <div class="flex h-[96px] items-center gap-3 rounded-200 bg-surface-secondary pl-4 pr-[64px]">
        <CdsIcon :icon="event.icon" />
        <div class="flex flex-col">
          <span class="text-200">{{ event.text }}</span>
          <span class="text-100 text-content-secondary">{{ event.time }}</span>
        </div>
      </div>
    </CdsSlideViewItem>
  </CdsSlideView>
</template>

API

CdsSlideView

Пропсы

Имя	Тип	По умолчанию	Описание
continuous	boolean | undefined	—	Зацикливает перелистывание: с последнего слайда переход ведёт на первый и наоборот
crossfade	boolean | undefined	—	Слайды сменяются плавным перекрестным затуханием вместо сдвига
direction	"horizontal" | "vertical" | undefined	'horizontal'	Переключение между горизонтальным или вертикальным отображением.
disabled	boolean | null | undefined	null	Заблокированное состояние
mandatory	boolean | "force" | undefined	—	Обязательный выбор хотя бы одного элемента
max	number | undefined	—	Максимальное количество выбираемых элементов
modelValue	any	—	Значение выбранных элементов группы
multiple	boolean | undefined	—	Разрешить множественный выбор
nextIcon	IconValue | undefined	'chevron-right'	Иконка кнопки перехода к следующему слайду
prevIcon	IconValue | undefined	'chevron-left'	Иконка кнопки перехода к предыдущему слайду
required	boolean | "force" | undefined	—	Обязательный выбор хотя бы одного элемента
reverse	boolean | undefined	—	Инвертирует направление анимации перехода между слайдами
selectedClass	string | undefined	—	CSS класс для выбранного состояния
showArrows	string | boolean | undefined	—	Показывает стрелки навигации. '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 — сторона по умолчанию

События

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

Слоты

Имя	Тип	Описание
additional	{ group: GroupProvide; }	Дополнительный контент поверх слайдов — например точки-индикаторы или собственная навигация
default	{ group: GroupProvide; }	Слайды. В параметрах — состояние группы для управления активным слайдом
next	{ props: ControlProps; }	Кнопка перехода к следующему слайду. В параметрах — готовые пропсы для своей кнопки
prev	{ props: ControlProps; }	Кнопка перехода к предыдущему слайду. В параметрах — готовые пропсы для своей кнопки

Exposed

Имя	Тип	Описание
group	GroupProvide	Состояние группы слайдов: список элементов, активный слайд и методы переключения.

CdsSlideViewItem

Пропсы

Имя	Тип	По умолчанию	Описание
disabled	boolean | null | undefined	null	Заблокированное состояние
eager	boolean | undefined	—	Принудительно рендерит содержимое компонента при его использовании. Это полезно, если у вас есть контент, который не отображается в DOM, но который необходимо проиндексировать для SEO.
reverseTransition	string | boolean | undefined	—	Переход при показе слайда в обратном направлении. Имя transition-компонента или false, чтобы отключить анимацию
selectedClass	string | undefined	—	CSS класс для выбранного состояния
transition	string | boolean | undefined	—	Переход при показе слайда в прямом направлении. Имя transition-компонента или false, чтобы отключить анимацию
value	any	—	Значение компонента в группе

События

Имя	Тип	Описание
group:selected	[value: { value: boolean; }]	Сработало при выборе слайда в группе. value — стал ли слайд активным

Слоты

Имя	Тип	Описание
default	any	Контент слайда

Exposed

Имя	Тип	Описание
groupItem	GroupItemProvide	Состояние слайда в группе: выбран ли он, его значение и метод переключения.