1
2
3
Componentsstable
Carousel
An accessible and customizable carousel component built with Embla Carousel, featuring arrow navigation, dot indicators, and autoplay.
Installation
Install the component directly into your project using the Pittaya CLI.
npx pittaya@latest add carousel
When to use
Use the Carousel when you need to display multiple images or content pieces sequentially, allowing users to navigate through them intuitively.
It's ideal for image galleries, customer testimonials, highlighting products, or any content that benefits from sequential presentation with focus on one item at a time.
Best practices
- Keep a reasonable number of slides (3-7 is ideal) to avoid overwhelming users.
- Use autoplay sparingly - allow users to control navigation when possible.
- Always provide alternative navigation controls (arrows and/or dots) when using autoplay.
- Ensure content is readable across different screen sizes.
- Use images with consistent dimensions to avoid abrupt layout shifts.
- Consider disabling autoplay when content requires reading or interaction.
Accessibility
The component provides full keyboard navigation support through arrow keys (← and →), allowing users to navigate without using a mouse.
Navigation buttons include descriptive aria-label attributes ("Previous slide" and "Next slide"), and dot indicators have aria-current to communicate the active slide to screen readers.
When autoplay is active, it automatically pauses when the user interacts with the carousel, respecting the user's preference for manual control.
Examples
Combine variants and sizes to meet your needs.
Product showcase
Display featured products with real images, names, prices and call-to-action buttons.
Home Decor
Modern Furniture
$599
Electronics
Vintage Camera
$899
Accessories
Designer Watch
$1,299
Customer testimonials
Showcase customer reviews with real photos and autoplay for social proof.
★★★★★
"This product has completely transformed our workflow. The team loves it!"
Sarah Johnson
Product Manager at TechCorp
★★★★★
"Outstanding quality and support. Highly recommend to anyone."
Michael Chen
CEO at StartupXYZ
★★★★★
"Beautiful design and incredible attention to detail. Five stars!"
Emma Wilson
Designer at Creative Co
Promotional banners
Display marketing campaigns with stunning background images and compelling CTAs.
Summer Collection
Up to 50% Off
Limited time offer on selected items
New Arrivals
Fresh & Trending
Discover the latest styles
Premium Quality
Crafted to Perfection
Experience luxury and comfort
1/3
Image gallery
Showcase portfolio work or project images with clean overlay design.
Interior Design
Architecture Studio
Photography
Urban Landscape
Product Design
Minimal Workspace
Art Direction
Fashion Editorial
Properties
TSX interface that combines variants and default attributes.
| Prop | Type | Default | Description |
|---|---|---|---|
childrenRequired | React.ReactNode | — | The carousel slides. Use the CarouselItem component for each slide. |
className | string | — | Additional CSS classes for customizing the container. |
autoplay | boolean | false | Enables automatic slide playback. Autoplay pauses when the user interacts with the carousel. |
autoplayInterval | number | 3000 | Interval in milliseconds between automatic transitions when autoplay is active. |
showDots | boolean | true | Displays dot indicators at the bottom for navigation and visual feedback of the current slide. |
showArrows | boolean | true | Displays navigation buttons (arrows) on the sides to advance and go back through slides. |
showCounter | boolean | false | Displays a numeric counter (e.g. 1/5) indicating the current slide and total slides. |
loop | boolean | true | Allows the carousel to return to the first slide after the last and vice versa. |