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

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.

showArrows boolean | default: true

Show previous and next arrow buttons.

align 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.

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