Carousel

Displays multiple items in a sliding gallery.

Slide 1

This is the first slide of the carousel.

Slide 2

This is the second slide of the carousel.

Slide 3

This is the third slide of the carousel.

---
blocks:
  _component: building-blocks/wrappers/carousel
  slides:
    - contentSections:
        - _component: building-blocks/core-elements/heading
          text: Slide 1
          level: h2
          alignmentHorizontal: center
        - _component: building-blocks/core-elements/text
          alignmentHorizontal: center
          text: This is the first slide of the carousel.
    - contentSections:
        - _component: building-blocks/core-elements/heading
          text: Slide 2
          level: h2
          alignmentHorizontal: center
        - _component: building-blocks/core-elements/text
          text: This is the second slide of the carousel.
          alignmentHorizontal: center
    - contentSections:
        - _component: building-blocks/core-elements/heading
          text: Slide 3
          level: h2
          alignmentHorizontal: center
        - _component: building-blocks/core-elements/text
          text: This is the third slide of the carousel.
          alignmentHorizontal: center
  label: ''
  autoPlay: false
  autoScroll: false
  slideWidthPercent: 100
  minSlideWidth: 0
---

Overview #

A carousel for displaying multiple slides of content. Supports autoplay and auto-scroll options, dot or fraction indicators (e.g. 1/3), and configurable slide widths and minimum sizes to maintain responsive layouts.

Properties #

label string

Optional label for the carousel to help identify it in the editor.

slides array | default: array

Array of slides to display in the carousel.

Item Properties:

contentSections array | default: array

autoPlay boolean | default: false

Enable auto-play functionality.

autoScroll boolean | default: false

Enable auto-scroll functionality.

loop boolean | default: true

Loop the carousel back to the beginning when reaching the end.

showIndicators boolean | default: true

Show dot indicators below the carousel.

indicatorStyle enum | default: dots

Dot indicators or a slide counter (e.g. 1/3).

Accepted values:

dots
fraction

showArrows boolean | default: true

Show previous and next arrow buttons.

alignmentHorizontal enum | default: center

Alignment of slides within the carousel viewport.

Accepted values:

start
center
end

slidesToScroll enum | default: auto

Number of slides to scroll at a time, or "auto" to scroll by the number of visible slides.

Accepted values:

auto
1
2
3
4

slideWidthPercent string | default: 100

Width of each slide as a percentage of the carousel (e.g., 33, 50, 100).

minSlideWidth number | default: 0

Minimum width of slides in pixels. Prevents slides from getting too small.

gap enum | default: none

The gap between slides. Only visible when slides are narrower than the viewport.

Accepted values:

none
xs
sm
md
lg
xl
2xl
3xl

Slots #

default

The contents for the the Carousel. Used only when the slides property is not set.

Child Component:

<CarouselSlide>

Properties (documented under the slides property above):

contentSections/slot

Examples #

Auto play #

The team shipped a polished site in days, not months. It changed how we approach launches.

Jules Mercer
Head of Marketing, Northwind

Editing feels effortless. Our content team stopped waiting on developers for every little change.

Priya Ramanathan
Content Lead, Fernridge

Performance, accessibility, and design polish — we finally have all three in one stack.

Marcus Holloway
Engineering Manager, Helio

---
blocks:
  _component: building-blocks/wrappers/carousel
  autoPlay: true
  slides:
    - contentSections:
        - _component: building-blocks/core-elements/testimonial
          text: The team shipped a polished site in days, not months. It changed how we approach launches.
          authorName: Jules Mercer
          authorDescription: Head of Marketing, Northwind
          alignmentHorizontal: center
    - contentSections:
        - _component: building-blocks/core-elements/testimonial
          text: Editing feels effortless. Our content team stopped waiting on developers for every little change.
          authorName: Priya Ramanathan
          authorDescription: Content Lead, Fernridge
          alignmentHorizontal: center
    - contentSections:
        - _component: building-blocks/core-elements/testimonial
          text: Performance, accessibility, and design polish — we finally have all three in one stack.
          authorName: Marcus Holloway
          authorDescription: Engineering Manager, Helio
          alignmentHorizontal: center
---

Auto scroll #

Fast by default

Ship static pages with instant navigation and tiny bundles.

Visually editable

Every field is wired up for in-context editing in CloudCannon.

Composable

Mix and match building blocks to assemble any page layout.

Accessible

Semantic markup and keyboard support baked into every component.

Themeable

Swap colors, fonts, and spacing with a few design tokens.

---
blocks:
  _component: building-blocks/wrappers/carousel
  autoScroll: true
  slideWidthPercent: 33
  minSlideWidth: 200
  gap: md
  slides:
    - contentSections:
        - _component: building-blocks/wrappers/card
          border: true
          rounded: true
          paddingHorizontal: sm
          paddingVertical: sm
          contentSections:
            - _component: building-blocks/core-elements/heading
              text: Fast by default
              level: h4
            - _component: building-blocks/core-elements/text
              text: Ship static pages with instant navigation and tiny bundles.
    - contentSections:
        - _component: building-blocks/wrappers/card
          border: true
          rounded: true
          paddingHorizontal: sm
          paddingVertical: sm
          contentSections:
            - _component: building-blocks/core-elements/heading
              text: Visually editable
              level: h4
            - _component: building-blocks/core-elements/text
              text: Every field is wired up for in-context editing in CloudCannon.
    - contentSections:
        - _component: building-blocks/wrappers/card
          border: true
          rounded: true
          paddingHorizontal: sm
          paddingVertical: sm
          contentSections:
            - _component: building-blocks/core-elements/heading
              text: Composable
              level: h4
            - _component: building-blocks/core-elements/text
              text: Mix and match building blocks to assemble any page layout.
    - contentSections:
        - _component: building-blocks/wrappers/card
          border: true
          rounded: true
          paddingHorizontal: sm
          paddingVertical: sm
          contentSections:
            - _component: building-blocks/core-elements/heading
              text: Accessible
              level: h4
            - _component: building-blocks/core-elements/text
              text: Semantic markup and keyboard support baked into every component.
    - contentSections:
        - _component: building-blocks/wrappers/card
          border: true
          rounded: true
          paddingHorizontal: sm
          paddingVertical: sm
          contentSections:
            - _component: building-blocks/core-elements/heading
              text: Themeable
              level: h4
            - _component: building-blocks/core-elements/text
              text: Swap colors, fonts, and spacing with a few design tokens.
---

Width percentage #

Starter

Everything you need to launch a simple marketing site.

Growth

Add a blog, custom sections, and team editing workflows.

Scale

Multi-site support, advanced permissions, and priority support.

Enterprise

Bespoke onboarding, SLAs, and custom integrations for your org.

---
blocks:
  _component: building-blocks/wrappers/carousel
  slideWidthPercent: 33
  minSlideWidth: 200
  gap: md
  slides:
    - contentSections:
        - _component: building-blocks/wrappers/card
          border: true
          rounded: true
          paddingHorizontal: sm
          paddingVertical: sm
          contentSections:
            - _component: building-blocks/core-elements/heading
              text: Starter
              level: h4
            - _component: building-blocks/core-elements/text
              text: Everything you need to launch a simple marketing site.
    - contentSections:
        - _component: building-blocks/wrappers/card
          border: true
          rounded: true
          paddingHorizontal: sm
          paddingVertical: sm
          contentSections:
            - _component: building-blocks/core-elements/heading
              text: Growth
              level: h4
            - _component: building-blocks/core-elements/text
              text: Add a blog, custom sections, and team editing workflows.
    - contentSections:
        - _component: building-blocks/wrappers/card
          border: true
          rounded: true
          paddingHorizontal: sm
          paddingVertical: sm
          contentSections:
            - _component: building-blocks/core-elements/heading
              text: Scale
              level: h4
            - _component: building-blocks/core-elements/text
              text: Multi-site support, advanced permissions, and priority support.
    - contentSections:
        - _component: building-blocks/wrappers/card
          border: true
          rounded: true
          paddingHorizontal: sm
          paddingVertical: sm
          contentSections:
            - _component: building-blocks/core-elements/heading
              text: Enterprise
              level: h4
            - _component: building-blocks/core-elements/text
              text: Bespoke onboarding, SLAs, and custom integrations for your org.
---

Fraction indicator #

Step 1 — Plan

Map out the sections you need and gather the content you want to showcase.

Step 2 — Assemble

Drop building blocks into the page and arrange them to match your design.

Step 3 — Publish

Review in the visual editor and ship your changes with a single click.

---
blocks:
  _component: building-blocks/wrappers/carousel
  showIndicators: true
  indicatorStyle: fraction
  slides:
    - contentSections:
        - _component: building-blocks/wrappers/card
          border: true
          rounded: true
          paddingHorizontal: md
          paddingVertical: md
          contentSections:
            - _component: building-blocks/core-elements/heading
              text: Step 1 — Plan
              level: h3
            - _component: building-blocks/core-elements/text
              text: Map out the sections you need and gather the content you want to showcase.
    - contentSections:
        - _component: building-blocks/wrappers/card
          border: true
          rounded: true
          paddingHorizontal: md
          paddingVertical: md
          contentSections:
            - _component: building-blocks/core-elements/heading
              text: Step 2 — Assemble
              level: h3
            - _component: building-blocks/core-elements/text
              text: Drop building blocks into the page and arrange them to match your design.
    - contentSections:
        - _component: building-blocks/wrappers/card
          border: true
          rounded: true
          paddingHorizontal: md
          paddingVertical: md
          contentSections:
            - _component: building-blocks/core-elements/heading
              text: Step 3 — Publish
              level: h3
            - _component: building-blocks/core-elements/text
              text: Review in the visual editor and ship your changes with a single click.
---