スライダー

一連の注目アイテムを表示するためのカルーセルコンポーネントです。

はじめに

スライダーは、一連のアイテムをカルーセルで表示します。各アイテムには背景画像、タイトル、テキスト、および必要に応じて独自のアクションがあります。レンダリングには Keen Slider ライブラリを使用します。

すべてのコンポーネントに共通する仕組みに従います。詳細は 概要 と コンポーネントの種類 を参照してください。

スライダーのフィールド

共通フィールド（種類、順序、編集モード、背景を反転）に加えて、スライダーには以下があります：

フィールド	説明
タイトル (title)	スライダーブロックのタイトル。
コンテンツ (content / html_content)	ブロックの導入テキスト。
画像 (image)	スライダー自体に関連付けられた画像（アイテムではありません）。
画像の代替テキスト (image_alt)	画像の代替テキスト。
画像のタイトル (image_title)	画像の title 属性。

アイテム

各アイテムはスライダー（page_slider_id）に属し、カルーセルの「スライド」の1つです：

フィールド	説明
タイトル (title)	スライドのタイトル。
コンテンツ (content / html_content)	スライドのテキスト。
画像 (image)	スライドの背景画像。
画像の代替テキスト (image_alt)	画像の代替テキスト。
画像のタイトル (image_title)	画像の title 属性。
順序 (sorter)	カルーセル内のスライドの位置。
アクション	各アイテムは独自のアクションを関連付けることができます — アクション を参照してください。

一覧との違い

一覧のアイテムとは異なり、スライダーのアイテムは独自のアクションを持ち、個別に関連付けられます（page_slider_item_action）。各スライドは独自のボタン/リンクを持つことができます。

レンダリング構造

一覧と同様に、スライダーの Item は兄弟フォルダではなく、種類のフォルダ内に配置されます：

website/src/components/Slider/
├── index.jsx              # ルーター: スライダーの種類を選択
└── Default/
    ├── index.jsx           # スライダーのレイアウト。 <Item /> でカルーセルを組み立てる
    ├── info.json
    ├── config.json
    └── Item/
        └── index.jsx        # 各スライド。独自のアクションを含む

利用可能な種類

現在は 標準（Default）タイプのみが存在します。新しいスライダーの種類（独自の Item を持つ）を作成するには、コンポーネントの種類 で説明されているのと同じ手順に従い、新しい種類の中に Item/ サブフォルダを含めることを忘れないでください。

次のステップ

次は 機能 に進みます。