Carousel

Автовоспроизведение со счётчиком

1 / 11

Без автовоспроизведения

Свои слайды через слот

Изображение 1

Входные параметры

Имя	Тип	По умолчанию	Описание
`images`	`CarouselImage[]`	`[]`	Список слайдов. Каждый слайд: `src` (URL изображения) и `alt?` (альтернативный текст).
`modelValue`	`number`	`0`	Текущий индекс слайда (управляется через `v-model`).
`autoplay`	`boolean`	`false`	Включает автовоспроизведение (переключение по таймеру).
`interval`	`number`	`4000`	Интервал автовоспроизведения в миллисекундах.
`loop`	`boolean`	`true`	Зацикливание: возврат к первому слайду после последнего.
`showArrows`	`boolean`	`true`	Показывать кнопки-стрелки переключения.
`showDots`	`boolean`	`true`	Показывать точки-индикаторы слайдов.
`showCounter`	`boolean`	`false`	Показывать счётчик «N / M».

События

Имя	Аргументы	Когда срабатывает
`update:modelValue`	`index: number`	При переходе к слайду (поддерживает `v-model`).
`change`	`index: number`	При каждом переходе к другому слайду.

Описание

Карусель — слайдер изображений с горизонтальным треком, который сдвигается на текущий слайд. Поддерживает стрелки, точки-индикаторы, счётчик «N / M», автовоспроизведение и зацикливание.

Используйте её для демонстрации набора изображений (например, в каталоге или галерее). Текущий индекс можно контролировать через v-model, а сами слайды — кастомизировать через слот.

Дополнительная информация

Слот slide — scoped-slot { image, index } для кастомной отрисовки слайда; по умолчанию выводится <img> с alt.
Стрелки получают aria-label «Предыдущий слайд» / «Следующий слайд» и отключаются на границах, когда loop=false.
Точки — кнопки с aria-label и aria-current для активного слайда.
Невидимые слайды помечаются aria-hidden.
Автовоспроизведение приостанавливается при наведении (mouseenter/mouseleave) и запускается после монтирования, если autoplay включён и слайдов не меньше двух.
Индекс нормализуется по количеству слайдов, поэтому при loop границы циклируются.