amp-carousel コンポーネントを使用すると、複数の画像を表示するカルーセルを作成できます。コンポーネントのプロパティを変更すると、カルーセルのデザインと動作をカスタマイズできます。
プロジェクトで amp-carousel コンポーネントを使用する
-
[コンポーネント] パネル、[ギャラリー] フォルダの順に開きます。
-
amp-carousel コンポーネント
をステージにドラッグします。
-
[プロパティ] パネルで [amp-carousel] 欄を見つけ、[名前] 欄にコンポーネント名を入力します。
-
[画像] 欄で、次のいずれかの方法で画像をギャラリーに追加します。
- 「ギャラリーの画像を選択」ボタン
をクリックします。[画像を選択] ボタンをクリックして画像ファイルを参照するか、ダイアログ ボックスにファイルを直接ドラッグします。
- 画像の URL をカンマで区切って入力します。
- 「ギャラリーの画像を選択」ボタン
-
（省略可）他のコンポーネントのプロパティを調整します（下記をご覧ください）。
コードビュー
images）で列挙します。列挙されない場合は、コンポーネントのソースコードを正式な仕様に合わせてください（公開済みのファイルは仕様に準拠している必要があります）。カルーセルの画像を並べ替える、または削除する
- [プロパティ] パネルの [amp-carousel] 欄で、「ギャラリーの画像を選択」ボタン
- 画像を並べ替えるには、移動したい位置に画像をドラッグします。カルーセルから画像を削除するには、画像にカーソルを合わせて「画像の削除」アイコン
をクリックします。
- [OK] をクリックします。
プロパティ
[プロパティ] パネルで、amp-carousel コンポーネントのデザインと動作を変更します。
| プロパティ | 説明 |
|---|---|
| 名前 | amp-carousel の名前です。 |
| 画像 | カルーセルに表示する画像の URL です。 |
| タイプ | 表示タイプ:
|
| 自動再生 |
タイプが [スライド] に設定されている場合にのみ適用されます。
このチェックボックスをオンにすると、ユーザーが操作しなくともカルーセル内の次の画像が自動的に表示されます。自動再生を行うには 3 枚以上のスライドが必要です。 |
| 遅延 |
タイプが [スライド] に設定され、[自動再生] が有効な場合にのみ適用されます。
次のスライドに進むまでの時間です（ミリ秒単位）。デフォルトの遅延は 5,000 ミリ秒（5 秒）です。 |
| コントロールを表示 | このチェックボックスをオンにすると、モバイル デバイスでカルーセル内のアイテム間を移動するための左右矢印が表示されます。パソコンでは、複数のアイテムが含まれているカルーセルには常に矢印が表示されます。 |
| ループ |
タイプが [スライド] に設定されている場合にのみ適用されます。
このチェックボックスをオンにすると、最後のスライドを進めて最初のスライドを表示したり、最初のスライドから戻って最後のスライドを表示したりでき、カルーセルがループします。ループさせるには、3 枚以上のスライドが必要です。 |
イベントと操作
amp-carousel コンポーネントから送信されるイベント以下の amp-carousel コンポーネントのイベントによってその他の操作をトリガーできます。
| イベント | 説明 |
|---|---|
| スライドの変更 | 表示されたスライドが変わると送信されます。 |
[イベント] ダイアログでこれらのイベントのいずれかを選択するには、amp-carousel コンポーネントをターゲットに設定します。
amp-carousel コンポーネントの以下の操作は、その他のイベントによってトリガーできます。
| 操作 | 設定項目 |
|---|---|
| スライドに移動 |
|
[イベント] ダイアログでこれらの操作のいずれかを選択するには、amp-carousel コンポーネントをレシーバーに設定します。
イベントを設定する方法も併せてご確認ください。
プレビュー
このコンポーネントは Google Web Designer インターフェースではプレビューできません。コンポーネントの動作を確認するには、右上隅にある [プレビュー] ボタン 