For a carousel of images with dot delimiters and autoplay take the ready CdsCarousel, for sections with a navigation bar take CdsTabs, and for a strip where several elements are visible at once take CdsSlideGroup.

Anatomy

The container shows one active CdsSlideViewItem slide, and the arrows at the edges page to the neighboring ones — they are turned on by the show-arrows prop. v-model holds the index of the active slide — or the value from the value prop of the slide, if it is set.

Storybook

Variations

Arrows

By default there are no arrows — the slides are paged with a swipe on touch devices or programmatically through v-model. The show-arrows prop turns the arrows on: true shows them at all times, "hover" only on hover over the slide. Keyboard navigation comes together with the arrows. The swipe is turned off with :touch="false", and the icons of the arrows are changed with the prev-icon and next-icon props.

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

The vertical-arrows prop gathers the arrows turned on by show-arrows into a column at the edge of the slide: true or 'left' puts them on the left, 'right' on the 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 paging

The continuous prop closes the slides into a ring: the first one follows the last. Without it the matching arrow is hidden on the edge slides.

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

The direction="vertical" prop moves the slides vertically — the navigation keys change together with the animation: ↑ / ↓ work instead of ← / →.

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>

Transitions

The crossfade prop replaces the shift with a soft dissolve — a good fit when the slides are not lined up in a sequence. On a single CdsSlideViewItem the animation is configured with the transition and reverse-transition props: the name of your own transition animation or false to turn it off. The content of a slide is rendered on the first show; the eager prop renders it right away — useful for 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>

Slots

Slot	Description
default	The CdsSlideViewItem slides
prev, next	Your own paging buttons; they receive props with onClick and aria-label
additional	Content after the slides: indicators, a counter, captions

The additional slot receives a group with the selection methods — but an outer v-model is usually enough, as in the demo with the dot indicators.

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>

Guidelines

Storybook

Scenarios

A step-by-step form

The steps of a questionnaire are switched with buttons through v-model: the arrows stay off and the swipes are muted with :touch="false" — the only way to move is "Back" and "Next". The height of the container animates to the content of the active step automatically.

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>

Customer testimonials

The quotes are not lined up in a sequence, so crossfade replaces the shift. The arrows appear on hover (show-arrows="hover"), the position is shown by a counter in the additional slot, and continuous pages the testimonials in a loop.

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>

An events feed

A compact widget with vertical paging: direction="vertical" moves the events from the bottom up, and vertical-arrows="right" gathers the arrows into a column at the right edge.

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

Props

Name	Type	Default	Description
continuous	boolean | undefined	—	Loops the navigation: from the last slide you move to the first one and back
crossfade	boolean | undefined	—	Slides change with a smooth crossfade instead of a shift
direction	"horizontal" | "vertical" | undefined	'horizontal'	Switches the component between horizontal and vertical layout.
disabled	boolean | null | undefined	null	Disabled state
mandatory	boolean | "force" | undefined	—	Requires at least one item to stay selected
max	number | undefined	—	Maximum number of items that can be selected
modelValue	any	—	Value of the selected items of the group
multiple	boolean | undefined	—	Allows selecting several items at once
nextIcon	IconValue | undefined	'chevron-right'	Icon of the button that moves to the next slide
prevIcon	IconValue | undefined	'chevron-left'	Icon of the button that moves to the previous slide
required	boolean | "force" | undefined	—	Requires at least one item to stay selected
reverse	boolean | undefined	—	Inverts the direction of the transition animation between slides
selectedClass	string | undefined	—	CSS class applied in the selected state
showArrows	string | boolean | undefined	—	Shows the navigation arrows. 'hover' — only while the pointer is over the component
tag	string | JSXComponent<any> | undefined	'div'	Custom HTML tag or component to render
theme	string | undefined	—	Component theme
touch	boolean | TouchHandlers | undefined	—	Controls swipe navigation: false turns the gestures off, an object sets your own touch handlers
transitionDuration	number | undefined	—	Duration of the transition animation between slides, in milliseconds
verticalArrows	boolean | "left" | "right" | undefined	—	Places the navigation arrows vertically: 'left' or 'right' — the side, true — the default side

Events

Name	Type	Description
update:modelValue	[]	Fires when the active slide changes. Passes the value of the new active slide

Slots

Name	Type	Description
additional	{ group: GroupProvide; }	Extra content above the slides — indicator dots or your own navigation, for example
default	{ group: GroupProvide; }	Slides. The slot props carry the group state for controlling the active slide
next	{ props: ControlProps; }	Button that moves to the next slide. The slot props are ready to bind to your own button
prev	{ props: ControlProps; }	Button that moves to the previous slide. The slot props are ready to bind to your own button

Exposed

Name	Type	Description
group	GroupProvide	State of the slide group: the list of elements, the active slide and the switching methods.

CdsSlideViewItem

Props

Name	Type	Default	Description
disabled	boolean | null | undefined	null	Disabled state
eager	boolean | undefined	—	Renders the content of the component right away. Useful when you have content that is not in the DOM but has to be indexed for SEO.
reverseTransition	string | boolean | undefined	—	Transition used when the slide appears in the reverse direction. A transition component name, or false to turn the animation off
selectedClass	string | undefined	—	CSS class applied in the selected state
transition	string | boolean | undefined	—	Transition used when the slide appears in the forward direction. A transition component name, or false to turn the animation off
value	any	—	Value of the component within the group

Events

Name	Type	Description
group:selected	[value: { value: boolean; }]	Fires when a slide is selected inside the group. value tells whether the slide became active

Slots

Name	Type	Description
default	any	Content of the slide

Exposed

Name	Type	Description
groupItem	GroupItemProvide	State of the slide inside the group: whether it is selected, its value and the toggle method.