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.