Carousel

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

インポート#


import { Carousel } from 'primereact/carousel';
         

基本#

カルーセルには、各アイテムをレンダリングするためのテンプレートと、その値としてアイテムのコレクションが必要です。

    
<Carousel value={products} numVisible={3} numScroll={3} responsiveOptions={responsiveOptions} itemTemplate={productTemplate} />
         

    循環#

    autoplayInterval がミリ秒単位で定義されている場合、アイテムは自動的にスクロールされます。さらに、無限スクロールのためには、自動再生モードで自動的に有効になるcircularプロパティを追加する必要があります。

      
<Carousel value={products} numVisible={3} numScroll={3} responsiveOptions={responsiveOptions} className="custom-carousel" circular
autoplayInterval={3000} itemTemplate={productTemplate} />
         

      スクロール数#

      スクロールするアイテムの数は、numScrollオプションで指定します。

        
<Carousel value={products} numScroll={1} numVisible={3} responsiveOptions={responsiveOptions} itemTemplate={productTemplate} />
         

        レスポンシブ#

        カルーセルは、オブジェクトの配列を受け取るresponsiveOptionsプロパティを使用して、画面サイズごとの特定の構成をサポートします。各オブジェクトは、最大幅のbreakpoint、1ページあたりのアイテム数を示すnumVisible、およびスクロールするアイテム数を示すnumScrollを定義します。responsiveOptionsが定義されている場合、適用されるブレークポイントがある場合は、カルーセルのnumScrollおよびnumVisibleプロパティがデフォルトとして使用されます。

          
<Carousel value={products} numScroll={1} numVisible={3} responsiveOptions={responsiveOptions} itemTemplate={productTemplate} />
         

          垂直#

          垂直カルーセルを作成するには、orientationをverticalに設定し、verticalViewPortHeightを設定する必要があります。

            
<Carousel value={products} numVisible={1} numScroll={1} orientation="vertical" verticalViewPortHeight="360px" itemTemplate={productTemplate} />
         

            アクセシビリティ#

            スクリーンリーダー

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

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

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

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

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

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

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

            キー機能
            tabアクティブなスライドリンク間でフォーカスを移動します。
            enterフォーカスされたスライドリンクをアクティブ化します。
            spaceフォーカスされたスライドリンクをアクティブ化します。
            右矢印フォーカスを次のスライドリンクに移動します。
            左矢印フォーカスを前のスライドリンクに移動します。
            homeフォーカスを最初のスライドリンクに移動します。
            endフォーカスを最後のスライドリンクに移動します。
                          PrimeReact 10.8.3 by PrimeTek