Carousel 設定 | PhamDocs

Carousel 設定

schedule2026.03.04

Carousel は、複数のコンテンツ（画像、カード、テキストなど）を同一領域内に表示し、ユーザーがスライドを切り替えながら閲覧できる UI コンポーネントです。

本機能は splide.jsライブラリをベースに構築されています。

設定content_copycheck_circle

Assets : コンテンツ設定。Carousel に表示する画像一覧を追加します。
Media Type	現在、以下の 2 種類を選択可能です。 Image : 単純な画像のみを表示する Carousel です。
Media Type	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 が有効な場合に適用されます。