> 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/en/experience/campaign/create-new-1/stickybar-carousel.md).

# Sticky Bar Carousel Mode

## What is carousel mode

Carousel mode turns a single sticky bar (fixed bar) into multiple **slides** that switch automatically or manually within the same bar. It's a great fit when you have several selling points, multiple coupons, or a few announcements you want to show in turn inside one limited banner.

Common use cases:

* Cycle through multiple promotional points so users see more information without taking up extra page space;
* Rotate multiple coupons / campaigns for exposure;
* Roll out announcements and notices.

> **Tip:** When you turn carousel mode off, the slide you are currently editing is kept as a plain static sticky bar, and the other slides are removed.

<figure><img src="/files/LqoZ28h7xvCSYWNvG1gd" alt="Sticky bar carousel in action"><figcaption></figcaption></figure>

## Turning on carousel mode

In the sticky bar editor, use the **Carousel mode** toggle on the toolbar to turn the carousel on or off.

<figure><img src="/files/aWXdb2xSI5qOu6JbMLBN" alt="Carousel mode toggle location"><figcaption></figcaption></figure>

## Carousel layout: full width / centered

The carousel layout determines the overall presentation of the whole bar, so we recommend **choosing the layout first**, then editing each slide. Select it at the top of **Carousel settings**:

<figure><img src="/files/yfOORID7AyRsBRvik6Hk" alt="Carousel layout options"><figcaption></figcaption></figure>

### Full width (default)

Each slide's background **fills the entire sticky bar**, and the **whole bar slides together** on transition — background and content move as one unit, left/right (or up/down).

* **When to use**: each screen is a complete full-screen visual with a different style/background. For example, several promo banners with different key visuals (red big-sale screen → black new-arrival screen → green membership screen) rotating, when you want the **whole banner to refresh as a whole**.
* **Visual**: on transition you see the **entire background move along with the content**.

<figure><img src="/files/gGcSkxyScb4YXESOmR0L" alt="Full width layout"><figcaption></figcaption></figure>

### Centered

The bar uses **one shared background** (full width, **static** during transitions), and only the **content and navigation arrows** slide within a fixed centered width.

* **When to use**: you want to keep the bar's **unified color / brand color** (e.g., a full-width black bar) and only rotate the **text / information**, for a cleaner, more consistent look; good for announcement rotation, multiple selling-point texts, or when you don't want content stretched too far apart on wide screens. Think of the top notification bars common on e-commerce sites (full-width dark bar + centered text with left/right arrows).
* **Visual**: the **background stays fixed** (unified full-width color); only the **center content switches**, and the side gutters remain the unified color.
* **Related settings** (appear once Centered is selected):
  * **Bar background (full width)**: sets that unified background color;
  * **Content width**: the centered maximum width for content and arrows, default **980 (PC) / 375 (mobile)**, adjustable. Content beyond this width is clipped in preview/production (the editor marks the safe area with a centered dashed box).

<figure><img src="/files/KEm43cAyNsBBPG8vXQ61" alt="Centered layout"><figcaption></figcaption></figure>

> **Tip:** In both layouts each slide can still have its own background; in Centered mode a slide's background is layered on top of the unified background and only applies to the center content area (showing the unified color when transparent). Check the actual layout effect in **Preview**.

## Carousel settings in detail

In the **Carousel settings** of the panel, you can adjust the carousel's animation and interaction.

> **Note:** Animation and carousel effects need to be checked in **Preview** — they do not play live on the editor canvas.

* **Effect**: the transition animation when switching slides: *Slide / Vertical / Fade / Zoom fade*;
* **Pagination**: the bottom pagination indicator style: *None / Bullets / Fraction / Progress bar*; when Bullets is selected you can also set bullet size, indicator color, and active bullet color;
* **Navigation arrows**: show left/right arrows, with adjustable arrow size and color;
* **Autoplay** and **Speed**: when enabled, slides switch automatically; Speed controls the duration of a single transition animation (in milliseconds);
* **Loop**: after the last slide, return to the first and keep looping;
* **Display duration**: by default all slides use the same global delay; to make one slide stay longer or shorter, enable **Custom duration** in that slide's settings.

<figure><img src="/files/LpUwotD1bRla56tdB5b4" alt="Carousel settings panel"><figcaption></figcaption></figure>

## Managing slides

Once the carousel is on, a **Slides** list appears in the settings panel, where you can switch, add, and delete slides, as well as **reorder them by dragging**.

### Adding a slide

Click **Add slide** for three ways to create one:

* **Duplicate current slide** — keeps the current slide's background, content, and click action; ideal for building consistent-looking slides;
* **Start from blank** — keeps only the default layout and starts from empty content;
* **Choose from templates…** — quickly create from presets such as countdown / coupon / promotion.

<figure><img src="/files/BUoaFAnThMAJqOHXnsMZ" alt="Slides list and the Add slide dropdown"><figcaption></figcaption></figure>

### Editing each slide independently

Every slide can be **edited independently**. Switch the slide tab to edit each slide's content elements (text, images, buttons, etc.) on the canvas.

Expand a slide in the list to configure settings **unique to that slide**:

* **Background** — choose a color (gradient supported) or an image; for an image you can upload/replace it and adjust opacity. This background applies only to the current slide and does not affect the others;
* **Click action** — set a click action for the whole slide, such as opening a link or event tracking;
* **Display duration** — check **Custom duration** to set this slide's dwell time individually (in milliseconds); otherwise it uses the carousel's global delay.

<figure><img src="/files/VYE39pYEimJYLkynJD5y" alt="Per-slide settings"><figcaption></figcaption></figure>

### Reordering slides

In the slides list, drag to change the order of the slides. The carousel plays them in the order shown in the list.

<figure><img src="/files/EpLnOU0UpsqMfeSseXQD" alt="Drag to reorder slides"><figcaption></figcaption></figure>

### About height

All slides in the carousel are **equal height**. The overall height automatically follows the tallest slide so there's no height jump during transitions. You can also adjust the whole carousel bar's height manually under **Position & Size → Sticky bar layout → Height**.

<figure><img src="/files/KYd8yYe1M6QZsuAmq58e" alt="Sticky bar height setting"><figcaption></figcaption></figure>

## Notes

* Check carousel animation effects in **Preview**; they do not play live on the editor canvas.
* A carousel sticky bar supports up to **10 slides**.