カルーセル

カルーセルは、さまざまなカスタマイズオプションを備えたコンテンツスライダーです。

インポート # 


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>

アクセシビリティ #

スクリーンリーダー

カルーセルは リージョン ロールを使用し、任意の属性がメインコンテナ要素に渡されるため、aria-label や aria-roledescription などの属性も使用できます。カルーセルが自動再生モードでない場合、スライドコンテナの aria-live 属性は "polite" に設定され、自動再生モードの場合は "off" になります。

スライドには、ロケール API の aria.slideNumber プロパティを参照する aria-label を持つグループ ロールがあります。同様に、aria.slide はアイテムの aria-roledescription として使用されます。非アクティブなスライドは、aria-hidden によってリーダーから非表示になります。

次へ/前へナビゲーターは、デフォルトでロケール API の aria.prevPageLabel および aria.nextPageLabel プロパティをそれぞれ参照する aria-label 属性を持つボタン要素です。それでも、有効な属性は nextButtonProps および prevButtonProps を使用することでボタン要素に暗黙的に渡されるため、独自の aria ロールと属性を使用できます。

クイックナビゲーション要素は、ロケール API の aria.pageLabel を参照する aria-label 属性を持つボタン要素です。現在のページは aria-current でマークされます。

次へ/前へのキーボードサポート

キー機能
タブカルーセルのインタラクティブな要素間でフォーカスを移動します。
Enterキーナビゲーションをアクティブにします。
スペースキーナビゲーションをアクティブにします。

クイックナビゲーションキーボードサポート

キー機能
タブアクティブなスライドリンク間でフォーカスを移動します。
Enterキーフォーカスされているスライドリンクをアクティブにします。
スペースキーフォーカスされているスライドリンクをアクティブにします。
右矢印キー次のスライドリンクにフォーカスを移動します。
左矢印キー前のスライドリンクにフォーカスを移動します。
Homeキー最初のスライドリンクにフォーカスを移動します。
Endキー最後のスライドリンクにフォーカスを移動します。
PrimeTekによるVue 3上のPrimeVue 4.0.7