カルーセルの API · Needless UI

インポート

import-carousel.ts

import { NuiCarousel, NuiCarouselSlide } from '@needless-ui/angular/carousel';

スライドを並べたカルーセル。

NuiCarousel: プロパティ
名前	型	デフォルト	説明
`label`入力	`string`		カルーセルの名前。
`index`双方向	`number`	`0`	表示中の最初のスライド。0 から数えます。
`perView`入力	`number \| 'auto'`	`1`	一度に表示するスライドの数。スライドが自身の幅を決める場合は `auto`。
`gap`入力	`string`	`'1rem'`	スライド間の間隔。任意の CSS の長さで指定します。
`loop`入力	`boolean`	`false`	最後のスライドの次は最初に、最初のスライドの前は最後に戻ります。
`autoplay`入力	`number (ms)`	`0`	自動再生でスライドが切り替わる間隔（ミリ秒）。0 のときは自動再生しません。
`controls, indicators`入力	`boolean`	`true`	前へ・次へのボタンと、ドット。
`labels`入力	`Partial<NuiCarouselLabels>`		カルーセルが表示または読み上げるすべてのテキスト。翻訳に使います。
`next, previous`メソッド	`() => void`		スライドを1枚進めるか、1枚戻します。
`goTo`メソッド	`(index: number) => void`		指定したスライドを表示します。

1枚のスライド。

NuiCarouselSlide: プロパティ
名前	型	デフォルト	説明
`nuiCarouselSlide`入力	`string`		スライドのタイトル。位置の代わりに読み上げられます。