輪播

輪播是一個內容滑塊，具有各種自訂選項。

導入 # 


import Carousel from 'primevue/carousel';

基本 #

輪播需要一個項目集合作為其值，以及一個範本來呈現每個項目。

沒有可用的選項

<Carousel :value="products" :numVisible="3" :numScroll="3" :responsiveOptions="responsiveOptions">
    <template #item="slotProps">
        <div class="border border-surface-200 dark:border-surface-700 rounded m-2  p-4">
            <div class="mb-4">
                <div class="relative mx-auto">
                    <img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-full rounded" />
                    <Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" class="absolute" style="left:5px; top: 5px"/>
                </div>
            </div>
            <div class="mb-4 font-medium">{{ slotProps.data.name }}</div>
            <div class="flex justify-between items-center">
                <div class="mt-0 font-semibold text-xl">${{ slotProps.data.price }}</div>
                <span>
                    <Button icon="pi pi-heart" severity="secondary" outlined />
                    <Button icon="pi pi-shopping-cart" class="ml-2"/>
                </span>
            </div>
        </div>
    </template>
</Carousel>

循環 #

當以毫秒為單位定義 autoplayInterval 時，項目會自動捲動。此外，對於無限捲動，需要添加 circular 屬性，該屬性會在自動播放模式下自動啟用。

沒有可用的選項

<Carousel :value="products" :numVisible="3" :numScroll="1" :responsiveOptions="responsiveOptions" circular :autoplayInterval="3000">
    <template #item="slotProps">
        <div class="border border-surface-200 dark:border-surface-700 rounded m-2  p-4">
            <div class="mb-4">
                <div class="relative mx-auto">
                    <img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-full rounded" />
                    <Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" class="absolute" style="left:5px; top: 5px"/>
                </div>
            </div>
            <div class="mb-4 font-medium">{{ slotProps.data.name }}</div>
            <div class="flex justify-between items-center">
                <div class="mt-0 font-semibold text-xl">${{ slotProps.data.price }}</div>
                <span>
                    <Button icon="pi pi-heart" severity="secondary" outlined />
                    <Button icon="pi pi-shopping-cart" class="ml-2"/>
                </span>
            </div>
        </div>
    </template>
</Carousel>

響應式 #

輪播支援每個螢幕尺寸的特定配置，使用 responsiveOptions 屬性，該屬性接受一個物件陣列，其中每個物件定義最大寬度 breakpoint、每個頁面的項目數 numVisible 以及要捲動的項目數 numScroll。當定義 responsiveOptions 時，當有適用的中斷點時，輪播的 numScroll 和 numVisible 屬性會用作預設值。

沒有可用的選項

<Carousel :value="products" :numVisible="3" :numScroll="1" :responsiveOptions="responsiveOptions">
    <template #item="slotProps">
        <div class="border border-surface-200 dark:border-surface-700 rounded m-2  p-4">
            <div class="mb-4">
                <div class="relative mx-auto">
                    <img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-full rounded" />
                    <Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" class="absolute" style="left:5px; top: 5px"/>
                </div>
            </div>
            <div class="mb-4 font-medium">{{ slotProps.data.name }}</div>
            <div class="flex justify-between items-center">
                <div class="mt-0 font-semibold text-xl">${{ slotProps.data.price }}</div>
                <span>
                    <Button icon="pi pi-heart" severity="secondary" outlined />
                    <Button icon="pi pi-shopping-cart" class="ml-2"/>
                </span>
            </div>
        </div>
    </template>
</Carousel>

垂直 #

若要建立垂直輪播，需要將 orientation 設定為 vertical，並同時設定 verticalViewPortHeight。

沒有可用的選項

<Carousel :value="products" :numVisible="1" :numScroll="1" orientation="vertical" verticalViewPortHeight="330px" containerClass="flex items-center">
    <template #item="slotProps">
        <div class="border border-surface-200 dark:border-surface-700 rounded m-2  p-4">
            <div class="mb-4">
                <div class="relative mx-auto">
                    <img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-full rounded" />
                    <Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" class="absolute" style="left:5px; top: 5px"/>
                </div>
            </div>
            <div class="mb-4 font-medium">{{ slotProps.data.name }}</div>
            <div class="flex justify-between items-center">
                <div class="mt-0 font-semibold text-xl">${{ slotProps.data.price }}</div>
                <span>
                    <Button icon="pi pi-heart" severity="secondary" outlined />
                    <Button icon="pi pi-shopping-cart" class="ml-2"/>
                </span>
            </div>
        </div>
    </template>
</Carousel>

協助工具 #

螢幕閱讀器

輪播使用 region 角色，並且由於任何屬性都會傳遞到主要容器元素，因此也可以使用諸如 aria-label 和 aria-roledescription 之類的屬性。如果輪播不是在自動播放模式下，則幻燈片容器的 aria-live 屬性設定為「polite」，否則在自動播放模式下該值將為「off」。

幻燈片具有 group 角色，其 aria-label 參照 地區設定 API 的 aria.slideNumber 屬性。同樣地，aria.slide 用作項目的 aria-roledescription。非活動幻燈片會使用 aria-hidden 對閱讀器隱藏。

下一個和上一個導覽器是按鈕元素，其 aria-label 屬性分別參照 地區設定 API 的 aria.prevPageLabel 和 aria.nextPageLabel 屬性。您仍然可以使用自己的 aria 角色和屬性，因為任何有效屬性都會透過使用 nextButtonProps 和 prevButtonProps 隱式地傳遞到按鈕元素。

快速導覽元素是按鈕元素，其 aria-label 屬性參照 地區設定 API 的 aria.pageLabel。當前頁面會以 aria-current 標記。

下一個/上一個鍵盤支援

按鍵功能
tab在輪播中移動焦點瀏覽互動式元素。
enter啟動導覽。
space啟動導覽。

快速導覽鍵盤支援

按鍵功能
tab移動焦點瀏覽活動幻燈片連結。
enter啟動聚焦的幻燈片連結。
space啟動聚焦的幻燈片連結。
右箭頭移動焦點到下一個幻燈片連結。
左箭頭移動焦點到上一個幻燈片連結。
home移動焦點到第一個幻燈片連結。
end移動焦點到最後一個幻燈片連結。
PrimeVue 4.2.5 在 Vue 3 上，由 PrimeTek