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>
    <Heading alignX="center" level="h2">
      Slide 1
    </Heading>
    <Text alignX="center">
      <p>This is the first slide of the carousel.</p>
    </Text>
  </CarouselSlide>
  <CarouselSlide>
    <Heading alignX="center" level="h2">
      Slide 2
    </Heading>
    <Text alignX="center">
      <p>This is the second slide of the carousel.</p>
    </Text>
  </CarouselSlide>
  <CarouselSlide>
    <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:
    - 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.
    - 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
    - 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

slides string | default: array

autoPlay string | default: false

autoScroll string | default: false

loop string | default: true

showIndicators string | default: true

showArrows string | default: true

align string | default: center

slidesToScroll string | default: auto

slideWidthPercent string | default: 100

minSlideWidth string | default: 0

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