Карусель

Компонент v-carousel используется для перебора элементов—изображений или слайдов текста.

Применение

A carousel by default has a slide transition.

API

v-carousel
Имя
active-class
По умолчанию
'v-item--active'
Тип
string

Класс для активного элемента

Имя
cycle
По умолчанию
true
Тип
boolean

Определяет, должна ли карусель перемещаться по изображениям

Имя
dark
По умолчанию
false
Тип
boolean

Применяет тёмный вариант темы

Имя
delimiter-icon
По умолчанию
'$vuetify.icons.delimiter'
Тип
string

Устанавливает значок для карусельного разделителя

Имя
height
По умолчанию
500
Тип
number | string

Установка высоты компонента

Имя
hide-controls
По умолчанию
false
Тип
boolean

Скрывает элементы управления навигацией

Имя
hide-delimiters
По умолчанию
false
Тип
boolean

Скрывает панель с разделителями карусели

Имя
interval
По умолчанию
6000
Тип
number | string

Продолжительность между циклами изображения

Имя
light
По умолчанию
false
Тип
boolean

Применяет светлый вариант темы

Имя
mandatory
По умолчанию
true
Тип
boolean

Значение должно быть определено или первое доступное значение будет выбрано

Имя
max
По умолчанию
undefined
Тип
number | string

Устанавливает максимальную ширину

Имя
multiple
По умолчанию
false
Тип
boolean

Включение множественного выбора. Свойство value принимает массив

Имя
next-icon
По умолчанию
$vuetify.icons.next
Тип
boolean | string

Добавьте значок к компоненту, используя тот же синтаксис, что и v-icon

Имя
prev-icon
По умолчанию
$vuetify.icons.prev
Тип
boolean | string

Подключите иконку к компоненту, используя тот же синтаксис, что и v-icon

Имя
reverse
По умолчанию
false
Тип
boolean

Components.Carousels.

Имя
touch
По умолчанию
undefined
Тип
object

Components.Carousels.

Имя
touchless
По умолчанию
false
Тип
boolean

Components.Carousels.

Имя
value
По умолчанию
undefined
Тип
any

Контроль видимости

Имя
vertical
По умолчанию
false
Тип
boolean

Components.Carousels.

Примеры

Пользовательский переход

Вы также можете применить свой собственный переход.

Пользовательский разделитель

Вы также можете изменить значок карусельного разделителя.

Скрыть элементы управления

Вы можете скрыть нижние элементы управления с помощью hide-controls.

Hide delimiters

You can hide the bottom controls with the hide-delimiters prop.

Edit this page | language on Github
Vuetify 3 is now available!The latest version of Vuetify is now available!
Learn about Vuetify 3's new features and functionality for modern Vue applications
Start exploringExplore