Carousel は、複数のコンテンツ（画像、カード、テキストなど）を同一領域内に表示し、ユーザーがスライドを切り替えながら閲覧できる UI コンポーネントです。
本機能は splide.jsライブラリをベースに構築されています。
設定content_copycheck_circle
| Assets : コンテンツ設定。Carousel に表示する画像一覧を追加します。 | |
|---|---|
| Media Type | 現在、以下の 2 種類を選択可能です。 Image : 単純な画像のみを表示する Carousel です。 |
| Image + Link: 各画像に URL を設定でき、クリックすると指定リンクへ遷移します。 | |
| General（基本設定） | |
| Fade | 通常の横スライドではなく、フェード（フェードイン・フェードアウト）でスライドを切り替えるモードです。 |
| Auto Play | 一定時間ごとに自動で次のスライドへ切り替わります。ユーザーの操作は不要です。
|
| Auto Scroll | スライドを途切れることなく連続的に自動スクロールします。 Auto Play とは異なり、1枚ずつ切り替わるのではなく、ベルトコンベアのように滑らかに流れ続けます。
|
| Thumbnail | メイン Carousel の下部にサムネイル一覧を表示します。 ユーザーは任意のスライドを直接選択できます。 |
| Arrows | 左右のナビゲーション矢印ボタンを表示します。 ユーザーが手動でスライドを切り替えられます。
|
| Pagination | 現在のスライド位置を示すドットナビゲーションを表示します。 総スライド数および現在位置が視覚的に分かります。 |
| Column PC / TAB / SP | デバイスごと（PC・タブレット・スマートフォン）に、1画面あたりの表示スライド数を指定します。 |
| Advanced（詳細設定） | |
| ID | Carousel にカスタム ID を設定します。 |
| Class | Carousel にカスタム CSS クラスを追加します。 |
| Fixed Width | 各スライドの固定幅を指定します。 この値を設定した場合、Column PC / TAB / SP の設定は無効になります。 単位は PX または % のいずれかで指定できます。 |
| Fixed Height | 各スライドの固定高さを指定します。 この値を設定した場合、Column PC / TAB / SP の設定は無効になります。 単位は PX または % のいずれかで指定できます。 |
| Gap | スライド間の余白を指定します。 単位は PX または % のいずれかで指定できます。 |
| PerMove | 一度の操作で移動するスライド枚数を指定します。 例：1ページに3枚表示しつつ、1枚ずつ移動させることも可能です。 |
| Interval | Auto play の切り替え間隔（ミリ秒）を指定します。 |
| Speed | スライドのトランジション速度（ミリ秒）を指定します。 この設定は Auto Scroll が有効な場合に適用されます。 |
