このコンポーネントは、AMP HTML 広告、動画広告、イメージ広告ではサポートされていません。
カルーセル ギャラリー コンポーネントを使って、スワイプ操作をして複数の画像を表示できるカルーセル形式のギャラリーを作成します。コンポーネントのプロパティを変更して、さまざまな 3D 効果やカルーセル タイプを作成できます。また、ダイナミック広告でカルーセル ギャラリーを使用することもできます。
適したギャラリーを選ぶ
Google Web Designer には 4 つのギャラリー コンポーネントが用意されています。
- 360 度ギャラリーでは、1 つのオブジェクトをあらゆる角度から表示できます。前後にスワイプするとオブジェクトが回転します。360 度ギャラリーではグループ要素やナビゲーション要素は表示できません。
- スワイプ ギャラリーは、平面的にオブジェクトを表示できるシンプルなギャラリーです。画像やグループ間を垂直方向または水平方向にスワイプできます。
- カルーセル ギャラリーはスワイプ ギャラリーに似ていますが、画像が円周上に 3D 形式で配置される点が異なります。
- トランジション ギャラリーでは、画像を切り替えながらさまざまなアニメーション効果を使用できます。
プロジェクトでカルーセル ギャラリーを使用するには:
-
[コンポーネント] パネル、[ギャラリー] フォルダの順に開きます。
-
カルーセル ギャラリー コンポーネント
をステージにドラッグします。
-
[プロパティ] パネルの [カルーセル ギャラリー] 欄で、コンポーネントの名前を設定します。
-
画像のセットまたはグループのセットのいずれかを追加します。画像以外の要素を表示したり、1 つのフレームに複数の要素を表示したりするには、グループを使用します。
- ギャラリーに画像を追加するには、次のいずれかの方法を使用します。
- [プロパティ] パネルの [カルーセル ギャラリー] 欄で、[画像] 項目の「ギャラリーの画像を選択」ボタン
をクリックします。[画像を選択] ボタンをクリックして画像ファイルを参照するか、ダイアログ ボックスにファイルを直接ドラッグします。
- [プロパティ] パネルの [カルーセル ギャラリー] 欄で、画像の URL をカンマで区切って [画像] に追加します。
- [プロパティ] パネルの [カルーセル ギャラリー] 欄で、[画像] 項目の「ギャラリーの画像を選択」ボタン
- ギャラリーにグループを追加するには:
- [プロパティ] パネルの [カルーセル ギャラリー] 欄で、グループの名前をカンマで区切って [グループ] に追加します。
- ギャラリーに画像を追加するには、次のいずれかの方法を使用します。
-
（省略可）他のコンポーネント プロパティを調整します（下記をご覧ください）。
ギャラリーの画像の並べ替えや削除を行う
- [プロパティ] パネルの [カルーセル ギャラリー] 欄で、「ギャラリーの画像を選択」ボタン
- 画像を並べ替えるには、画像を移動したい位置にドラッグします。ギャラリーから画像を削除するには、画像にカーソルを合わせて「削除」
ボタンをクリックします。
- [OK] をクリックします。
プロパティ
| プロパティ | 説明 |
|---|---|
| 名前 | カルーセル ギャラリーの名前を設定します。 |
| 画像 | ギャラリーで使用する画像を選択できます。動的データにバインドできます。 |
| グループ | ギャラリーで使用するグループをカンマで区切って指定します。動的データにバインドできます。 |
| 移行 | 画像間の移行時間（ミリ秒単位）です。 |
| 開始フレーム | 最初に表示する画像の枚数です。 |
| 自動再生 | オンにすると、ギャラリーの画像が自動再生されます。 |
| ナビゲーションを含める | オンにすると、ギャラリー内の移動中にナビゲーション アイコンが表示されます。 |
| サムネイルを使用 | [ナビゲーションを含める] と一緒にオンにすると、ナビゲーションにアイコンではなくサムネイルが表示されます。 |
| ハイライトの色 | ナビゲーション画像のハイライトの色を設定します。 |
| スケーリング | 固定サイズのフレームにさまざまなサイズの画像をどのように表示するかを指定します。
|
詳細プロパティ
詳細プロパティを表示するには、コンポーネントのプロパティ ペインで [詳細プロパティ] の横にある展開アイコン をクリックします。
| フレーム幅 | ギャラリー内の画像フレームの幅（ピクセル単位） |
| フレーム高さ | ギャラリー内の画像フレームの高さ（ピクセル単位） |
| 近傍回転 | 隣接するフレームに適用される回転量 |
| 近傍分離 | フレーム間の間隔 |
| 近傍垂直オフセット | 隣接フレームが表示されるときの高さ |
| 近傍規模 | 隣接画像の相対的な大きさ |
| exit URL | ギャラリー内の各フレームに対応する URL のリスト（複数の場合はカンマで区切ります）動的データにバインドできます。 |
| 反射を表示（WebKit） | オンにすると、反射した画像を表示できます。反射は WebKit ブラウザでのみサポートされています。 |
| フレームの終了時にメディアを一時停止 | オンにすると、フレームが移行するたびに、現在のフレームで再生中の音声または動画が一時停止します（背景での不要なコンテンツの再生を防止できます）。 |
| フレームの開始時にメディアを再開 | オンにすると、フレームが移行するたびに、次のフレームで一時停止していた音声や動画が再開されます（背景での不要なコンテンツの再生を防止できます）。 |
イベントと操作
カルーセル ギャラリー コンポーネントから送信されるイベント以下のカルーセル ギャラリー コンポーネントのイベントに基づいてその他の操作をトリガーできます。
| イベント | 説明 |
|---|---|
| 最初の操作 | ユーザーがギャラリーを最初に操作したときに送信されます。 |
| すべてのフレームを表示 | ギャラリーのすべてのフレームが少なくとも一度表示されると送信されます。 |
| 画像読み込み完了 | ギャラリーのすべてのフレームが読み込まれると送信されます。 |
| 自動再生終了 | 何らかの理由で自動再生が終了すると送信されます。 |
| フレームの表示 | 新しいフレームの表示が完了するたびに送信されます。 |
| フレーム有効化 | フレームの変更が開始されると送信されます。 |
| フレーム自動再生 | 自動再生用にフレームが有効になると送信されます。 |
| フレームのタップ | フレームがクリックされると送信されます。 |
| 左端に到達 | スワイプ後に、ギャラリーが左端に到達すると送信されます。 |
| 右端に到達 | スワイプ後に、ギャラリーが右端に到達すると送信されます。 |
| トラッキング開始 | マウスまたはタップのドラッグが開始されると送信されます。 |
| トラッキング | マウスまたはタップのドラッグにより得られる X と Y の位置データが登録されます。 |
| トラッキング終了 | マウスまたはタップのドラッグが終了すると送信されます。 |
[イベント] ダイアログでこれらのイベントのいずれかを選択するには、カルーセル ギャラリー コンポーネントをターゲットとして設定します。
カルーセル ギャラリー コンポーネントの以下の操作は、他のイベントをもとにトリガーできます。
| 操作 | 設定項目 |
|---|---|
| フレームに移動 |
|
| 進む | アニメーション - [none] または [slide] |
| 戻る | アニメーション - [none] または [slide] |
| 1 回転 |
|
| 回転を停止 | なし |
[イベント] ダイアログでこれらの操作のいずれかを選択するには、カルーセル ギャラリー コンポーネントをレシーバーとして設定します。
イベントを設定する方法をご確認ください。
プレビュー
ステージでは、カルーセル ギャラリーに開始フレームが表示され、コンポーネントの表示の状態をおおまかに確認できます。完全にレンダリングされたコンポーネントの動作を確認するには、右上隅の [プレビュー] ボタンをクリックして、お使いのブラウザでドキュメントをプレビューしてください。