Carousel

v-carousel コンポーネントは、タイマーで入れ替わる数枚の大きなビジュアルコンテンツを表示するために使います。

Usage

A carousel by default has a slide transition.

API

v-carousel
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.

Edit this page | language on Github