輪播 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`		往前或往後移動一張投影片。
`goTo`方法	`(index: number) => void`		把某張投影片捲動到畫面中。

一張投影片。

NuiCarouselSlide: 屬性
名稱	型別	預設值	說明
`nuiCarouselSlide`輸入	`string`		投影片的標題，朗讀時會取代它的位置。