> For the complete documentation index, see [llms.txt](https://helps.ptengine.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://helps.ptengine.com/experience/campaign/create-new-1/stickybar-carousel.md).
# 固定バーのカルーセルモード
## カルーセルモードとは
カルーセルモードは、1 本の固定バー（スティッキーバー）を複数の**スライド**にして、同じバー内で自動または手動で切り替えて表示できる機能です。複数の訴求ポイント、複数のクーポン、いくつかのお知らせを、限られた 1 本のバーの中で順番に見せたいときに最適です。
よくある利用シーン：
* 複数の販促ポイントを循環表示し、ページの余分なスペースを使わずに多くの情報を見せる；
* 複数のクーポン / キャンペーンを順番に露出する；
* お知らせ・通知を巡回表示する。
> **ヒント：** カルーセルモードをオフにすると、現在編集中のスライドが通常の静的な固定バーとして残り、その他のスライドは削除されます。
## カルーセルモードをオンにする
固定バーのエディターで、ツールバー上の **「カルーセルモード」** スイッチでカルーセルのオン / オフを切り替えます。
## カルーセルレイアウト：全幅 / 中央寄せ
カルーセルレイアウトはバー全体の見せ方を決めるため、**先にレイアウトを決めてから**各スライドを編集することをおすすめします。**「カルーセル設定」** の上部で選択できます：
### 全幅（デフォルト）
各スライドの背景が**バー全体に広がり**、切り替え時に**バー全体が一緒にスライド**します——背景とコンテンツが一体となって左右（または上下）に切り替わります。
* **利用シーン**：各画面が独立したフルスクリーンビジュアルで、画面ごとにスタイル/背景が異なる場合。例えばキービジュアルの異なる複数の販促バナー（赤の大セール画面 → 黒の新商品画面 → 緑の会員画面）を順番に表示し、**バー全体を丸ごと切り替えたい**とき。
* **見た目の特徴**：切り替え時に**背景全体がコンテンツと一緒に動く**のが見えます。
### 中央寄せ
バーは**1 枚の共通背景**（全幅、切り替え時は**動かない**）を使い、**コンテンツと左右の矢印**だけが中央の一定の幅の中でスライドして切り替わります。
* **利用シーン**：バーの**統一した地色 / ブランドカラー**（全幅の黒バーなど）を保ちつつ、**テキスト / 情報**だけを切り替えたい、より落ち着いた統一感のある見た目にしたいとき。お知らせの巡回表示、複数の訴求テキスト、ワイド画面でコンテンツを広げすぎたくない場合などに向きます。EC サイトでよく見る上部の通知バー（全幅の濃色バー + 中央のテキストと左右矢印）を想像してください。
* **見た目の特徴**：**背景は固定**（全幅の統一地色）、**中央のコンテンツだけが切り替わり**、両側の余白は統一地色のままです。
* **関連設定**（中央寄せを選ぶと表示）：
* **バー背景（全幅）**：その統一地色（色）を設定；
* **コンテンツ幅**：コンテンツと左右矢印の中央寄せ最大幅。デフォルト **980（PC）/ 375（モバイル）**、数値で調整可。この幅を超えたコンテンツはプレビュー / 公開時に切り取られます（エディターでは中央の破線枠で安全範囲を表示）。
> **ヒント：** どちらのレイアウトでも各スライドは自身の背景を持てます。中央寄せモードでは、各スライドの背景は統一地色の上に重なり、中央のコンテンツ領域にのみ適用されます（透明の場合は統一地色が透けます）。実際のレイアウト効果は **「プレビュー」** でご確認ください。
## カルーセル設定の詳細
パネルの **「カルーセル設定」** で、カルーセルのアニメーションとインタラクションを調整できます。
> **注意：** アニメーションとカルーセルの効果は **「プレビュー」** で実際の表示を確認してください。エディターのキャンバス上ではリアルタイムに再生されません。
* **エフェクト**：スライド切り替え時のアニメーション：*スライド / 縦スライド / フェード / ズームフェード*；
* **ページネーション**：下部のページネーション表示スタイル：*なし / ドット / 分数 / プログレスバー*。ドットを選ぶと、ドットのサイズ・インジケーター色・選択中ドットの色も設定できます；
* **ナビゲーション矢印**：左右の矢印を表示し、矢印のサイズと色を調整できます；
* **自動再生** と **速度**：有効にするとスライドが自動で切り替わります。速度は 1 回の切り替えアニメーションの時間を制御します（単位はミリ秒）；
* **ループ**：最後のスライドの後に最初へ戻り、繰り返し再生します；
* **表示時間**：既定ではすべてのスライドが共通のディレイを使用します。特定のスライドだけ長く / 短く表示したい場合は、そのスライドの設定で **「表示時間を個別に設定」** を有効にします。
## スライドの管理
カルーセルをオンにすると、設定パネルに **「スライド」** リストが表示され、スライドの切り替え・追加・削除、そして**ドラッグによる並べ替え**ができます。
### スライドの追加
**「スライドを追加」** をクリックすると、3 つの作成方法があります：
* **現在のスライドを複製** — 現在のスライドの背景・内容・クリックアクションを引き継ぎます。デザインを揃えた複数スライドの作成に最適；
* **空白から開始** — 既定のレイアウトのみを残し、空の内容から作成；
* **テンプレートから選択…** — カウントダウン / クーポン / 販促などのプリセットから素早く作成。
### 各スライドを個別に編集
各スライドは**個別に編集**できます。スライドタブを切り替えると、各スライドの内容要素（テキスト・画像・ボタンなど）をキャンバス上でそれぞれ編集できます。
リストでスライドを展開すると、そのスライド**固有の設定項目**を設定できます：
* **背景** — 色（グラデーション対応）または画像を選択できます。画像の場合はアップロード / 差し替えと不透明度の調整が可能。この背景は現在のスライドにのみ適用され、他のスライドには影響しません；
* **クリックアクション** — スライド全体にクリックアクション（リンク遷移やイベント計測など）を設定；
* **表示時間** — **「表示時間を個別に設定」** にチェックすると、このスライドの表示時間を個別に設定できます（単位はミリ秒）。チェックしない場合はカルーセルの共通ディレイを使用します。
### 再生順の並べ替え
スライドリスト内でドラッグして各スライドの順番を変更できます。カルーセルはリストに表示された順に再生します。
### 高さについて
カルーセル内のすべてのスライドは**同じ高さ**です。全体の高さは最も高いスライドに自動で合わせられるため、切り替え時に高さがガタつきません。カルーセルバー全体の高さは **「位置とサイズ」→「固定バーのレイアウト」→「高さ」** から手動で調整することもできます。
## 注意事項
* カルーセルのアニメーション効果は **「プレビュー」** で確認してください。エディターのキャンバス上ではリアルタイム再生されません。
* 1 本のカルーセル固定バーで最大 **10 枚**のスライドまで対応します。