> 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.
## Turning on carousel mode
In the sticky bar editor, use the **Carousel mode** toggle on the toolbar to turn the carousel on or off.
## 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**:
### 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**.
### 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).
> **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.
## 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.
### 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.
### 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.
### 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**.
## 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**.
