Carousel

A responsive carousel component for cycling through multiple content items like Hero sections or other components.

Component Preview

Props

Prop	Type	Description
children	React.ReactNode[]	Array of child components to display as slides.
autoPlay	boolean	Whether to automatically cycle through slides. Default: true.
interval	number	Time in milliseconds between auto-transitions. Default: 5000.
showArrows	boolean	Whether to show navigation arrows. Default: true.
showIndicators	boolean	Whether to show slide position indicators. Default: true.
className	string	Optional CSS class name for the wrapper.

JSON Data Example

{
  "type": "Carousel",
  "data": {
    "autoPlay": true,
    "interval": 5000,
    "children": [
      {
        "type": "Hero",
        "data": {
          "title": "Slide 1",
            "subtitle": "Slide 1 subtitle",
            "imageSrc": "https://picsum.photos/800/400",
            "textPosition": "left",
            "textAlignment": "left",
            "padding": "none",
            "className": "min-h-[70vh] md:min-h-[100vh] bg-primary text-primary-950",
            "focalPoint": "center"
        }
      },
      {
        "type": "Hero",
        "data": {
          "title": "Slide 2",
            "subtitle": "Slide 2 subtitle",
            "imageSrc": "https://picsum.photos/800/400",
            "textPosition": "left",
            "textAlignment": "left",
            "padding": "none",
            "className": "min-h-[70vh] md:min-h-[100vh] bg-primary text-primary-950",
            "focalPoint": "center"
        }
      }
    ]
  }
}