Carousel
Rotating content slider with customizable controls.
Basic
Default carousel
Autoplay
Slides automatically
Custom Buttons
Use render props for navigation
Custom Dots
Replace dot indicators
Demo Two
Large spacing with gradient arrows
Alice Johnson
CEO & Founder
Passionate about creating amazing user experiences and driving innovation.
Bob Smith
CTO
Passionate about creating amazing user experiences and driving innovation.
Carol Davis
Design Lead
Passionate about creating amazing user experiences and driving innovation.
David Wilson
Developer
Passionate about creating amazing user experiences and driving innovation.
Eva Brown
Marketing
Passionate about creating amazing user experiences and driving innovation.
Frank Miller
Sales
Passionate about creating amazing user experiences and driving innovation.
Demo Three
Testimonials with custom rating
"This product has completely transformed our workflow. Highly recommended!"
Sarah Chen
Tech Corp
"Outstanding customer service and incredible attention to detail."
Mike Rodriguez
Design Studio
"The best investment we've made for our business this year."
Emily Watson
StartupXYZ
"Intuitive, powerful, and exactly what we needed."
James Kim
Innovation Labs
Main Props
| Name | Type | Default | Description |
|---|---|---|---|
autoPlay | boolean | false | Automatically play slides |
autoPlayInterval | number | 3000 | Delay between auto slides |
showArrows | boolean | true | Display navigation arrows |
showDots | boolean | true | Display navigation dots |
itemsPerView | { mobile: number; tablet: number; desktop: number } | { mobile: 1, tablet: 1, desktop: 1 } | Items shown per screen size |
transitionDuration | number | 300 | Transition duration in ms |
slideSpacing | string | 'px-2' | Spacing between slides |
onSlideChange | (current: number, previous: number) => void | - | Slide change callback |
children | ReactNode | - | Carousel slides |
Class Props
| Name | Type | Default | Description |
|---|---|---|---|
className | string | '' | Class for root element |
classNameSlide | string | '' | Class for each slide |
classNameArrow | string | '' | Class for arrow buttons |
classNameDot | string | '' | Class for dot buttons |
classNameActiveDot | string | '' | Class for active dot |
classNameContainer | string | '' | Class for container |
classNameContent | string | '' | Class for content |
classNameNavigation | string | '' | Class for navigation wrapper |
Render Props
| Name | Type | Default | Description |
|---|---|---|---|
renderPrevButton | (props: { onClick: () => void; disabled: boolean; className: string }) => ReactNode | - | Custom previous button |
renderNextButton | (props: { onClick: () => void; disabled: boolean; className: string }) => ReactNode | - | Custom next button |
renderDots | (props: { totalDots: number; currentIndex: number; onDotClick: (index: number) => void; className: string }) => ReactNode | - | Custom dots wrapper |
renderDot | (props: { index: number; isActive: boolean; onClick: () => void; className: string }) => ReactNode | - | Custom dot |