カルーセルコンポーネント carousel-component
コアコンポーネントのカルーセルコンポーネントを使用すれば、コンテンツ作成者は、ナビゲーション可能なカルーセルにコンテンツを表示できます。
使用方法 usage
カルーセルコンポーネントを使用すれば、コンテンツ作成者は、複数のスライドから成る回転式のカルーセルとしてコンテンツを編成できます。
編集ダイアログでは、コンテンツ作成者は、複数のスライドの作成、命名、並べ替えを行ったり、遅延時間の指定が可能な自動切り替え機能を有効にしたりできます。デザインダイアログを使用すれば、テンプレート作成者は、カルーセルに追加できるコンポーネントを定義したり、自動切り替えを有効化または無効化したり、スタイルをカスタマイズしたりできます。
バージョンと互換性 version-and-compatibility
このドキュメントでは、カルーセルコンポーネントの現在のバージョン（2018年10月にコアコンポーネントのリリース 2.2.0 で導入された v1）について説明します。
コンポーネントのすべてのサポート対象バージョン、コンポーネントの各バージョンと互換性のある AEM バージョン、以前のバージョンのドキュメントへのリンクを次の表に示します。
コアコンポーネントのバージョンとリリースについて詳しくは、コアコンポーネントのバージョンを参照してください。
コンポーネント出力のサンプル sample-component-output
カルーセルコンポーネントを体験したり、その設定オプションの例や、HTML 出力や JSON 出力の例を確認したりするには、コンポーネントライブラリを参照してください。
技術的詳細 technical-details
カルーセルコンポーネントに関する最新の技術ドキュメントについては、GitHub を参照してください。
コアコンポーネントの開発について詳しくは、コアコンポーネント開発者向けドキュメントを参照してください。
パネルへのディープリンク deep-linking
カルーセル、タブおよびアコーディオンコンポーネントは、コンポーネント内のパネルに直接リンクする機能をサポートしています。
次の手順を実行します。
- ページエディターで「公開されているとおりに表示」オプションを使用して、ページとコンポーネントを表示します。
- ページのコンテンツを調べ、パネルの ID を特定します。
- 例：
id="carousel-bfe4fa6647-item-47f1a7ca67-tabpanel"
- 例：
- ID がアンカーになり、ハッシュ（
#）を使用して URL に追加できます。- 例：
https://wknd.site/content/wknd/language-masters/en/magazine/western-australia.html#carousel-bfe4fa6647-item-47f1a7ca67-tabpanel
- 例：
パネル ID をアンカーとして使用して指定した URL に移動すると、ブラウザーは特定のコンポーネントまで直接スクロールし、指定したパネルを表示します。デフォルトでパネルが表示されないように設定されている場合は、自動的にスクロールされます。
カルーセルおよびレスポンシブデザイン responsive-design
すべてのコアコンポーネントは、完全にレスポンシブに動作するように設計されており、デバイス間のシームレスなエクスペリエンスを実現します。
カルーセルコンポーネントなどの一部の高度なコンポーネントでは、すべての状況での応答性を維持するために、実装プロジェクトのコンテキスト内で特別な配慮を必要とする場合があります。詳しくは、コアコンポーネントのレスポンシブデザインのドキュメントを参照してください。
編集ダイアログ edit-dialog
編集ダイアログでは、コンテンツ作成者がスライドの追加、名前変更、並べ替えを行ったり、自動切り替えの設定を定義したりできます。
「項目」タブ items-tab
タブとして追加するコンポーネントを選択するためのコンポーネントセレクターを開くには、「追加」ボタンを使用します。追加が完了すると、以下の列を含むエントリがリストに追加されます。
- アイコン - リスト内で簡単に識別できるようにするための、タブのコンポーネントタイプのアイコン。マウスポインターを置くと、完全なコンポーネント名がツールチップとして表示されます。
- 説明 - タブのテキストとして使用される説明。デフォルトでは、タブ用に選択されたコンポーネントの名前に設定されます。
- 削除 - タップまたはクリックすると、タブコンポーネントからタブが削除されます。
- 並べ替え - タップまたはクリックしてドラッグすると、タブを並べ替えることができます。
「プロパティ」タブ properties-tab
「プロパティ」タブでは、コンテンツ作成者は、スライドが自動的に切り替わるように設定できます。
-
アクティブな項目 - コンテンツ作成者は、ページの読み込み時にアクティブになるタブを定義できます。
-
スライドを自動的に切り替え - 有効にすると、コンポーネントは指定した遅延の後で、自動的に次のスライドへと進みます。
-
切り替え遅延 - 「スライドを自動的に切り替え」を選択した場合、この値に基づいて切り替え間の遅延（ミリ秒単位）が定義されます。
-
ポイント時に自動で一時停止する機能を無効にする - 「スライドを自動的に切り替え」を選択した場合、カルーセルの上にマウスカーソルが置かれるたびに、カルーセルの切り替えが自動的に一時停止します。切り替えが一時停止しないようにするには、このオプションを選択します。
-
ID - このオプションを使用すると、HTML 内およびデータレイヤー内のコンポーネントの一意の識別子を制御できます。
- 空白のままにした場合、一意の ID が自動的に生成されます。生成された ID は結果のページを調べることで確認できます。
- ID を指定した場合、作者はその ID が一意であることを確認する必要があります。
- ID を変更すると、CSS、JS、およびデータレイヤーのトラッキングに影響を与える可能性があります。
「アクセシビリティ」タブ accessibility-tab
「アクセシビリティ」タブでは、コンポーネントの「ARIA アクセシビリティ」ラベルの値を設定できます。
- ラベル - カルーセルのコンテンツを説明する、カルーセルの aria-label 属性の値
- 前へ - カルーセルナビゲーションの「前へ」ボタンラベルの aria-label 属性の値
- 次へ - カルーセルナビゲーションの「次へ」ボタンラベルの aria-label 属性の値
- 再生 - カルーセルナビゲーションの再生ボタンラベルの aria-label 属性の値
- 一時停止 - カルーセルナビゲーションの一時停止ボタンラベルの aria-label 属性の値
- タブリスト - カルーセルナビゲーションの項目リストトラベルの aria-label 属性の値
- 項目の aria-label をタイトルに設定 - このオプションをオンにすると、カルーセル項目のタイトルが aria-label の説明に自動的に設定されます。
パネルを選択 select-panel
コンテンツ作成者は、コンポーネントツールバーの パネルを選択 オプションを使用して、編集用に別のスライドに切り替えたり、簡単にスライドを並べ替えたりできます。
コンポーネントツールバーの パネルを選択 オプションを選択すると、設定済みのスライドがドロップダウンとして表示されます。
- リスト内のスライドは割り当てられた順番で並べられ、その順番が通し番号に反映されます。
- まずスライドのコンポーネントタイプが表示され、次にスライドの説明が薄いフォントで表示されます。
- ドロップダウン内の 1 つのエントリをタップまたはクリックすると、エディターのビューがそのスライドに切り替わります。
- ドラッグハンドルを使用すれば、スライドをインプレースで並べ替えることができます。
デザインダイアログ design-dialog
デザインダイアログでは、テンプレート作成者が、カルーセルコンポーネントにスライドとして追加できるコンポーネントを定義したり、自動切り替えのデフォルト値を定義したり、コンテンツ作成者が利用できるカスタムスタイルを定義したりできます。
「プロパティ」タブ properties-tab-1
「プロパティ」タブを使用すれば、コンテンツ作成者がカルーセルコンポーネントをページに追加したときのスライド切り替えのデフォルト設定を定義できます。
- スライドを自動的に切り替え - コンテンツ作成者がカルーセルコンポーネントをページに追加したときに、カルーセルを次のスライドに自動的に進めるオプションをデフォルトで有効にするかどうかを定義します。
- 前にコントロール要素を追加 - オンにすると、アクセシビリティを向上させるため、コントロール要素がカルーセル項目の前に表示されます。
「許可されるコンポーネント」タブ allowed-components-tab
「許可されるコンポーネント」タブを使用すると、コンテンツ作成者がカルーセルコンポーネントにスライドとして追加できるコンポーネントを定義できます。
「許可されるコンポーネント」タブは、テンプレートエディターでレイアウトコンテナのポリシーやプロパティを定義する際の同じ名前のタブと同じように機能します。
「スタイル」タブ styles-tab
カルーセルコンポーネントは、AEM スタイルシステムをサポートしています。
Adobe Client Data Layer data-layer
カルーセルコンポーネントは、Adobe Client Data Layer をサポートしています。