amp-carousel コンポーネント

注: このコンポーネントは AMPHTML 広告でのみ使用できます。

amp-carousel コンポーネントを使用すると、複数の画像を表示するカルーセルを作成できます。コンポーネントのプロパティを変更すると、カルーセルのデザインと動作をカスタマイズできます。

amp-carousel コンポーネントのレンダリング例。

プロジェクトで amp-carousel コンポーネントを使用する

  1. [コンポーネント] パネル、[ギャラリー] フォルダの順に開きます。

  2. amp-carousel コンポーネント をステージにドラッグします。

  3. [プロパティ] パネルで [amp-carousel] 欄を見つけ、[名前] 欄にコンポーネント名を入力します。

  4. [画像] 欄で、次のいずれかの方法で画像をギャラリーに追加します。

    • ギャラリーの画像を選択」ボタン をクリックします。[画像を選択] ボタンをクリックして画像ファイルを参照するか、ダイアログ ボックスにファイルを直接ドラッグします。
    • 画像の URL をカンマで区切って入力します。
  5. (省略可)他のコンポーネントのプロパティを調整します(下記をご覧ください)。

コードビュー

コードビューでは、amp-carousel コンポーネントは [画像] プロパティの任意の画像を子としてではなく、特殊な Google Web Designer 属性(images)で列挙します。列挙されない場合は、コンポーネントのソースコードを正式な仕様に合わせてください(公開済みのファイルは仕様に準拠している必要があります)。

カルーセルの画像を並べ替える、または削除する

  1. [プロパティ] パネルの [amp-carousel] 欄で、「ギャラリーの画像を選択」ボタン をクリックします。ダイアログが開き、カルーセル内の画像のリストが表示されます。
  2. 画像を並べ替えるには、移動したい位置に画像をドラッグします。カルーセルから画像を削除するには、画像にカーソルを合わせて「画像の削除」アイコン trash can icon をクリックします。
  3. [OK] をクリックします。

プロパティ

[プロパティ] パネルで、amp-carousel コンポーネントのデザインと動作を変更します。

プロパティ 説明
名前 amp-carousel の名前です。
画像 カルーセルに表示する画像の URL です。
タイプ 表示タイプ:
  • カルーセル - すべてのスライドが一列に表示され、水平方向にスクロールできます。
  • スライド - 一度に 1 枚のスライドが表示されます。
自動再生
タイプが [スライド] に設定されている場合にのみ適用されます。

このチェックボックスをオンにすると、ユーザーが操作しなくともカルーセル内の次の画像が自動的に表示されます。自動再生を行うには 3 枚以上のスライドが必要です。

遅延
タイプが [スライド] に設定され、[自動再生] が有効な場合にのみ適用されます。

次のスライドに進むまでの時間です(ミリ秒単位)。デフォルトの遅延は 5,000 ミリ秒(5 秒)です。

コントロールを表示 このチェックボックスをオンにすると、モバイル デバイスでカルーセル内のアイテム間を移動するための左右矢印が表示されます。パソコンでは、複数のアイテムが含まれているカルーセルには常に矢印が表示されます。
ループ
タイプが [スライド] に設定されている場合にのみ適用されます。

このチェックボックスをオンにすると、最後のスライドを進めて最初のスライドを表示したり、最初のスライドから戻って最後のスライドを表示したりでき、カルーセルがループします。ループさせるには、3 枚以上のスライドが必要です。

イベントと操作

amp-carousel コンポーネントから送信されるイベント

以下の amp-carousel コンポーネントのイベントによってその他の操作をトリガーできます。

イベント 説明
スライドの変更 表示されたスライドが変わると送信されます。

[イベント] ダイアログでこれらのイベントのいずれかを選択するには、amp-carousel コンポーネントをターゲットに設定します。

amp-carousel コンポーネントで実行される操作

amp-carousel コンポーネントの以下の操作は、その他のイベントによってトリガーできます。

操作 設定項目
スライドに移動
  • インデックス - 次に表示するスライドです。最初のスライドは 0 で示します。

[イベント] ダイアログでこれらの操作のいずれかを選択するには、amp-carousel コンポーネントをレシーバーに設定します。

イベントを設定する方法も併せてご確認ください。

プレビュー

このコンポーネントは Google Web Designer インターフェースではプレビューできません。コンポーネントの動作を確認するには、右上隅にある [プレビュー] ボタン をクリックし、お使いのブラウザでドキュメントをプレビューしてください。

この情報は役に立ちましたか?
改善できる点がありましたらお聞かせください。