Build a content carousel in Gutenberg

Use Carousel to present editable text, images and layouts in ordered slides. This guide is for content editors using the WordPress block editor with POM active. For library-image presentations, use Gallery.

Create and organize slides

1. Open Pages → All Pages or Posts → All Posts and edit your content.
2. Insert the POM Carousel block, then choose Add slide. The carousel starts empty; adding a slide creates one Carousel item with an empty paragraph.
3. In Slide settings, enter a Slide title. This names the item in List View and named navigation arrows, without inserting a content heading.
4. Add paragraphs, headings, lists, images, galleries, icons, Icon Boxes, buttons, gaps, Tabs, Modal or theme layout blocks inside the item. Rows retain their existing Column and nesting rules. HTML and Shortcode blocks are also available.
5. Select the parent Carousel. Use Slides to select, move, duplicate or remove items, or use WordPress List View.
6. Save the page and preview it in a new tab.

Duplicate slide and the block duplication controls both regenerate a conflicting Slide ID, leaving the original unchanged. Duplicating a Carousel also regenerates its conflicting root anchor. Empty optional IDs remain empty. Check anchors inside duplicated content too: all IDs on a page must be unique. Use IDs beginning with a letter or underscore for Button/Image slider actions.

The Slides panel highlights the last selected slide even after you select the parent Carousel to edit its settings.

Choose a layout

The carousel uses the existing theme widths, including its carousel-specific 576px, 768px and 1200px boundaries and maximum card width. The desktop count is nominal; narrower screens show fewer cards. Adaptive height adjusts the viewport to the selected slide.

Navigation and motion

In Navigation, enable arrows and choose Style default, Over content, Next to content or Below content. Show dots applies to Style 2. Show slide numbers applies to every style. Allow dragging, Loop slides and Free scroll retain the theme's behavior; free scroll permits stopping between slides instead of snapping to a card.

Arrow icons and translated labels are saved with this static block. After changing the theme's navigation icons, choose Refresh theme arrow icons and save. Dynamic Image and Gallery blocks inside a slide still resolve current library metadata independently.

Autoplay is optional, with an Interval (ms) from 1,000 to 10,000. Reverse direction reverses automatic movement. Pause on hover pauses it while the pointer is over the slide viewport. Manual navigation stops autoplay. With looping disabled, autoplay stops at the last slide, or at the first slide in reverse direction; reverse playback starting on the first slide is already complete. Enable looping to repeat continuously. Prefer no autoplay when motion is unnecessary.

Alternatively, enable Autoplay → Continuous scroll. Choose Scroll direction and Scroll speed (px/s) from 1 to 300. This motion uses an infinite loop and takes precedence over timed autoplay; the interval and reverse-autoplay controls are hidden. Loop slides and Free scroll are also hidden because continuous motion always enables both internally. Turning continuous motion off restores those controls with your previous choices unchanged. Pause on hover is available for either mode. Continuous motion respects reduced-motion preferences and pauses during keyboard interaction. The editor remains stationary and editable; review movement in the frontend preview. Both modes reuse the theme's existing carousel runtime.

Image loading

With Advanced → Performance → Lazy loading (recommended) enabled in the theme settings, images and lazy backgrounds load as they become visible in the carousel. Partly visible neighboring cards count. Hidden slides and nested carousels inside hidden slides wait until revealed. Core Image, POM Image and responsive picture content use the same behavior.

Keep accurate image dimensions or a defined aspect ratio to reserve space. A newly revealed image may need a moment to download on a slow connection. Preload only the first image if it is critical to the initial view; preloading other slides forces their downloads ahead of visibility. See the builder performance review.

Link directly to a slide

1. Select Carousel and enter a unique Advanced → HTML anchor, such as customer-stories.
2. Give each target Carousel item a unique Slide ID, such as story-two.
3. In a POM Button or Image, choose its slider action and enter the parent ID. For a custom-slide action, enter the item's ID too.
4. Alternatively, enable Link to slides with URL hashes and link to #story-two.

Only one carousel per page should control the URL hash. Nested carousels keep independent slides, controls and counters.

Preview and verify

The editor uses the effective theme carousel CSS without loading the full frontend stylesheet. Slides remain editable in a horizontally scrollable strip. Previous/next editor controls and List View reveal slides. The decorative frontend arrows do not intercept editing; autoplay, dots and dragging must be checked in the frontend preview.

Under Accessibility and visibility, enter a descriptive Accessible name and choose the devices where the whole carousel is visible. Hidden blocks remain selectable in the editor. Additional CSS classes accepts existing helpers, not CSS declarations.

Before publishing, save and reload, check slide order and nested content, review all responsive previews including editable Very Large, operate arrows with Tab/Enter/Space, verify Button/Image targets and hash links, and check autoplay pause behavior. An empty carousel has no visible frontend content.

If an item is off-canvas in the editor, select it in List View. If an action does nothing, check both IDs and confirm that the target item belongs to that carousel. If an icon is outdated, refresh theme arrow icons, save and clear the relevant page/browser cache.

Related guides

• Add a theme button
• Add a live library image
• Build a gallery
• Carousel shortcode reference
• Carousel item shortcode reference