カルーセル

コンテンツの一部を1か所で循環式のビューで強調表示することができる動的なウィジェットです。

Carouselでは、コンテンツの複数の部分を表示することができ、同時に画像のサブセットを循環式のビューで表示することで画面領域を最適化することができます。Carouselのナビゲーションコントロールは、表示されていない追加コンテンツを連想させます。これにより、ユーザーは確認を続けることができます。

使用方法

プレースホルダ内の要素は異なるアイテムに分割されます。動的コンテンツの場合は、プレースホルダ内で直接リストを使用します。デフォルトでは、リストアイテムがカルーセルアイテムになります。

1. Carouselパターンをページにドラッグします。

2. コンテンツをItemsプレースホルダ内に配置します。データベースのアイテムを含むカルーセルを使用するには、［Items］プレースホルダにListRecordsをドラッグしてカスタムコンテンツを作成します。

   

   

1.パブリッシュしてテストします。

.carousel .tns-nav > [aria-controls] {
    width: 16px;
    height: 2px;
    border-radius: 0;
}

.carousel .tns-nav > [aria-controls] {
    width: 12px;
    height: 6px;
    border-radius: 4px;
}