Carousel
v-carousel コンポーネントは、タイマーで入れ替わる数枚の大きなビジュアルコンテンツを表示するために使います。
API
Name
active-class
Default
'v-item--active'
Type
string
Components.Carousels.
Name
cycle
Default
true
Type
boolean
Carousel が画像を循環させるかどうかを設定します。
Name
dark
Default
false
Type
boolean
ダークテーマを適用します。
Name
delimiter-icon
Default
'$vuetify.icons.delimiter'
Type
string
Carousel のデリミターとして使用するアイコンを設定します。
Name
height
Default
500
Type
number | string
Components.Carousels.
Name
hide-controls
Default
false
Type
boolean
ナビゲーションコントロールを隠します。
Name
hide-delimiters
Default
false
Type
boolean
Carousel のデリミターを隠します。
Name
interval
Default
6000
Type
number | string
画像が切り替わるまでの時間を設定します。
Name
light
Default
false
Type
boolean
ライトテーマを適用します。
Name
mandatory
Default
true
Type
boolean
Components.Carousels.
Name
max
Default
undefined
Type
number | string
Components.Carousels.
Name
multiple
Default
false
Type
boolean
Components.Carousels.
Name
next-icon
Default
$vuetify.icons.next
Type
boolean | string
Components.Carousels.
Name
prev-icon
Default
$vuetify.icons.prev
Type
boolean | string
Components.Carousels.
Name
reverse
Default
false
Type
boolean
Components.Carousels.
Name
touch
Default
undefined
Type
object
Components.Carousels.
Name
touchless
Default
false
Type
boolean
Components.Carousels.
Name
value
Default
undefined
Type
any
Components.Carousels.
Name
vertical
Default
false
Type
boolean
Components.Carousels.
Examples
カスタムトランジション
独自のカスタムトランジションを適用することもできます。
Custom icons
You can also change the icon for the carousel delimiter and previous/next icons.
コントロールを隠す
hide-controls prop を使用することで下部のコントローラーを隠すことができます。
Hide delimiters
You can hide the bottom controls with the hide-delimiters prop.