Carousel Block

The Carousel block (sometimes called a slider) lets you rotate through multiple pieces of content in the same space — such as images, posts, videos, products, or testimonials.

Carousels are designed to showcase multiple items in a compact, visually engaging way. They work best when used sparingly and with clear intent.

Use the Carousel block when you want to:

  • Highlight featured content without making the page too long
  • Showcase “top” items like posts, case studies, events, or promotions
  • Save space by rotating multiple visuals or messages within one area
  • Guide users through a visual sequence (before/after, steps, collections)

Carousels are most effective when each slide feels intentional and consistent. Overusing carousels or mixing unrelated content can make pages harder to navigate.

How to use the block

Start by adding the Carousel block to the page. Learn how to add blocks.

Once the block is added, editors typically:

  • Add and manage individual Carousel Slide blocks
  • Build content inside each slide using inner blocks
  • Adjust behavior settings in the block settings sidebar
  • Preview the carousel to confirm layout, motion, and usability

The Carousel block includes multiple Carousel Slide blocks. Each slide acts as its own content area, where you can add any supported blocks to build that slide’s layout.

Managing slides

When the Carousel block is selected, you’ll see controls below the block in the editor:

  • Add Slide: Create a new slide
  • Previous Slide: Move to the previous slide in the editor
  • Next Slide: Move to the next slide in the editor

Using List View is also helpful for navigating between slides and selecting blocks within each slide.

Best practices for slide content

  • Use similar layouts and content length across slides
  • Keep slide heights relatively consistent — avoid mixing very tall and very short slides
  • Use consistent image sizes and proportions when possible

Consistency improves usability and reduces layout shifts during transitions.

Block toolbar

When the Carousel block is selected, the block toolbar includes:

  • Block width: Control how wide the carousel appears within the layout

Block settings

Block settings appear in the right sidebar while the Carousel block is selected. These settings control the overall behavior of the carousel.

Autoplay

Automatically transitions between slides.

Autoplay delay

When Autoplay is enabled, this sets how long each slide displays before transitioning.
The value is in milliseconds. Common delays range between 3000 and 6000 milliseconds (3–6 seconds).

Loop

When enabled, the carousel returns to the first slide after reaching the last slide.

Navigation

Displays forward and back navigation arrows. This option is recommended for accessibility and usability.

Pagination

Displays circular indicators representing each slide. The active slide is highlighted. This is recommended to help users understand how many slides exist and where they are within the sequence.

Pagination clickable

When enabled, users can click pagination indicators to jump to a specific slide.

Slides per view

Controls how many slides are visible at once. 1 slide per view is the default and most common use case. 2 or 3 slides per view are also suitable for content that is more narrow.

Note: This setting applies to tablet and desktop only. On mobile, 1 slide per view is used.

Slides per group

When using multiple slides per view, this setting determines how many slides transition together.

For example: Setting Slides per view and Slides per group both to “3” will have all three slides transition at the same time.

Centered slides

When Slides per view is greater than 1, enabling this centers the active slide. Otherwise, the active slide displays first on the left.

Space between

Adds spacing (in pixels) between slides when multiple slides per view are displayed.

Speed

Controls how quickly slides transition, in milliseconds. Common speeds range between 300ms and 1000ms.

Slides per view auto

Automatically determines slide width and may display more than one slide per view. This is an advanced setting and generally not recommended.

Tips for editors

Use carousels intentionally

Carousels can reduce scrolling, but they also hide content. Make sure the content inside is important enough to rotate through.

Keep slides consistent

Use similar layouts, image sizes, and content lengths within the same carousel to create a predictable experience.

Be cautious with autoplay

Autoplay can be distracting. If enabled, use a reasonable delay and ensure Navigation and Pagination are also enabled.

Preview on multiple devices

Always preview the carousel on mobile and desktop to confirm layout, spacing, and slide behavior feel balanced.