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.

---
import Heading from "@core-elements/heading/Heading.astro";
import Text from "@core-elements/text/Text.astro";
import Carousel from "@wrappers/carousel/Carousel.astro";
import CarouselSlide from "@wrappers/carousel/CarouselSlide.astro";
---

<Carousel label="" minSlideWidth={0} slideWidthPercent={100}>
  <CarouselSlide _component="building-blocks/wrappers/carousel/carousel-slide">
    <Heading alignX="center" level="h2">
      Slide 1
    </Heading>
    <Text alignX="center">
      <p>This is the first slide of the carousel.</p>
    </Text>
  </CarouselSlide>
  <CarouselSlide _component="building-blocks/wrappers/carousel/carousel-slide">
    <Heading alignX="center" level="h2">
      Slide 2
    </Heading>
    <Text alignX="center">
      <p>This is the second slide of the carousel.</p>
    </Text>
  </CarouselSlide>
  <CarouselSlide _component="building-blocks/wrappers/carousel/carousel-slide">
    <Heading alignX="center" level="h2">
      Slide 3
    </Heading>
    <Text alignX="center">
      <p>This is the third slide of the carousel.</p>
    </Text>
  </CarouselSlide>
</Carousel>

---
blocks:
  _component: building-blocks/wrappers/carousel
  slides:
    - _component: building-blocks/wrappers/carousel/carousel-slide
      contentSections:
        - _component: building-blocks/core-elements/heading
          text: Slide 1
          level: h2
          alignX: center
        - _component: building-blocks/core-elements/text
          alignX: center
          text: This is the first slide of the carousel.
    - _component: building-blocks/wrappers/carousel/carousel-slide
      contentSections:
        - _component: building-blocks/core-elements/heading
          text: Slide 2
          level: h2
          alignX: center
        - _component: building-blocks/core-elements/text
          text: This is the second slide of the carousel.
          alignX: center
    - _component: building-blocks/wrappers/carousel/carousel-slide
      contentSections:
        - _component: building-blocks/core-elements/heading
          text: Slide 3
          level: h2
          alignX: center
        - _component: building-blocks/core-elements/text
          text: This is the third slide of the carousel.
          alignX: 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, with 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:

_component string | default: building-blocks/wrappers/carousel/carousel-slide

contentSections array | default: array

autoPlay boolean | default: false

Enable auto-play functionality.

autoScroll boolean | default: false

Enable auto-scroll functionality.

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.

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