#Carousel

A rotating set of slides for showcasing images or content.

#When to Use

• For image slideshows or banners
• To cycle through featured content
• For onboarding or tutorial slides

#Import

import { Carousel } from "orizon";

#Examples

#Basic

<Carousel>
  <div><h3>Slide 1</h3></div>
  <div><h3>Slide 2</h3></div>
  <div><h3>Slide 3</h3></div>
</Carousel>

#Autoplay

<Carousel autoplay>
  <div><h3>Slide 1</h3></div>
  <div><h3>Slide 2</h3></div>
  <div><h3>Slide 3</h3></div>
</Carousel>

#Fade Effect

<Carousel effect="fade">
  <div><h3>Slide 1</h3></div>
  <div><h3>Slide 2</h3></div>
</Carousel>

#API

#CarouselProps

• autoplay — boolean — Auto-advance slides (default: false)
• dots — boolean — Show dot indicators (default: true)
• dotPosition — "top" | "bottom" | "left" | "right" — Dot position (default: "bottom")
• effect — "scrollx" | "fade" — Transition effect (default: "scrollx")
• slidesToShow — number — Visible slides at once (default: 1)
• arrows — boolean — Show navigation arrows (default: false)
• initialSlide — number — Starting slide index (default: 0)
• infinite — boolean — Loop slides (default: true)
• beforeChange — (from: number, to: number) => void — Before slide change
• afterChange — (current: number) => void — After slide change

#Ref Methods

• goTo(slideNumber) — Navigate to specific slide
• next() — Go to next slide
• prev() — Go to previous slide