Carousel
NewA direction-aware swipeable content carousel with touch/mouse gestures, keyboard navigation, and auto-play. Uses Framer Motion for smooth RTL-aware animations.
Preview
RTL-First Design
Every component is built with right-to-left support from the ground up, not as an afterthought.
Installation
Usage
TypeScript
Examples
Basic Carousel
A simple image carousel with navigation arrows and dot indicators.
RTL-First Design
Every component is built with right-to-left support from the ground up, not as an afterthought.
Auto-Play
Automatically advances slides every 4 seconds. Pauses on hover or focus.
RTL-First Design
Every component is built with right-to-left support from the ground up, not as an afterthought.
Dots Only
Hide the arrow buttons and rely on swipe gestures and dot indicators.
RTL-First Design
Every component is built with right-to-left support from the ground up, not as an afterthought.
Custom Content
The carousel is content-agnostic — render cards, testimonials, or any component via renderItem.
“Noor UI saved us weeks of development time on our government portal project. The RTL support is flawless — we didn't have to write a single directional override. Our Arabic-speaking users finally get the same polished experience as everyone else.”
Ahmed Al-Rashid
Senior Frontend Engineer, Dubai Smart Gov
Without Loop
Disable looping so the carousel stops at the first and last slides.
Wireless Headphones
$129
Props
Carousel Props
| Name | Type | Default | Description |
|---|---|---|---|
itemsRequired | T[] | — | Array of items to display in the carousel |
renderItemRequired | (item: T, index: number) => ReactNode | — | Render function receiving (item, index) — return a React node for each slide |
autoPlay | number | false | false | Auto-advance interval in milliseconds (e.g. 4000), or false to disable |
showDots | boolean | true | Show dot indicators below the carousel |
showArrows | boolean | true | Show left/right navigation arrow buttons |
loop | boolean | true | Loop back to first item after the last (and vice versa) |
className | string | — | Additional CSS classes for the outer container |
slideClassName | string | — | Additional CSS classes for the slide area |
dotSize | 'sm' | 'lg' | 'sm' | Dot indicator size — 'sm' for subtle dots (default), 'lg' for touch-friendly 24px targets |
Accessibility
Region Landmark
The carousel is wrapped in role="region" with aria-roledescription="carousel", providing clear semantics for screen readers.
Keyboard Navigation
Arrow keys navigate between slides (RTL-aware), Home goes to first slide, End goes to last.
Auto-Play Pause
Auto-play pauses on hover and focus, giving users control over the animation.
Tab Indicators
Dot indicators use role="tab" with aria-selected for accessible slide selection.
RTL Support
The Carousel automatically mirrors in RTL mode. Swipe directions, keyboard arrows, animation slide direction, and arrow button positions all flip correctly.
LTR (English)
RTL-First Design
Every component is built with right-to-left support from the ground up, not as an afterthought.
RTL (Arabic)
تصميم RTL أولاً
كل مكوّن مبني مع دعم الاتجاه من اليمين لليسار من الأساس، وليس كإضافة لاحقة.
RTL Features
- •Swipe left/right directions flip to match content flow
- •Arrow buttons swap positions (start/end) via logical properties
- •Slide animations reverse direction using useRTLAnimation
- •Arrow key behavior mirrors for natural navigation
Best Practices
Do
- ✓ Provide navigation controls (arrows + dots)
- ✓ Support keyboard and swipe navigation
- ✓ Pause autoplay on hover and focus
Don't
- ✗ Don't use autoplay for important content
- ✗ Don't make carousel the only way to access content
- ✗ Don't hide navigation controls completely