Carousel
A swipeable image carousel built on Framer Motion spring physics. Supports auto-scroll, drag-to-swipe, overlay content, configurable transition speed, and dot indicators out of the box.
Basic with arrows
Arrow buttons and dot indicators are shown by default. Drag or swipe horizontally to navigate manually.
Auto-scroll
autoScroll advances slides automatically. keepInView (ms) controls how long each slide stays before the next one appears.
Controlled transition speed
transitionDuration controls the slide animation (seconds). fadeDuration controls the opacity cross-fade. Combine them for cinematic or snappy feels.
Slow — transitionDuration=1.2 fadeDuration=0.8
Fast — transitionDuration=0.2 fadeDuration=0.1
Swipe / drag only
Set showArrows={false} to hide the arrow buttons. Lower swipeThreshold makes swipe detection more sensitive. dragElastic controls how far the image stretches beyond the edge.
← drag left or right to swipe →
Overlay children — hero pattern
Any children passed to Carousel render above the current slide at z-index 10. Combine with TypingTexts for a full hero section.
SeaGit Component Library
Ship faster.
Drag to swipe · auto-advances every 5 s
Dot navigation only
Hide the arrows and let users navigate purely through the dot indicators. Works well for compact hero banners.
Props reference
All props are optional except images. Pass height to the carousel through className (e.g. className="h-64 w-full rounded-xl").
| Prop | Type | Default | Description |
|---|---|---|---|
| images | string[] | — | Required. Array of image URLs to display. |
| autoScroll | boolean | false | Automatically advance to the next slide. |
| keepInView | number | 3000 | Milliseconds each slide stays visible before auto-advancing. |
| showArrows | boolean | true | Show or hide the left / right arrow buttons. |
| transitionDuration | number | 0.5 | Duration of the slide animation in seconds. |
| fadeDuration | number | 0.3 | Duration of the opacity cross-fade in seconds. |
| swipeThreshold | number | 5000 | Minimum swipe power (|offset| × |velocity|) to trigger a slide change. Lower = more sensitive. |
| dragElastic | number | 0.8 | How far the image can be dragged beyond its constraints. 0 = rigid, 1 = fully elastic. |
| className | string | '' | Classes on the outer wrapper — use this to set h-*, w-*, rounded-*, etc. |
| children | ReactNode | — | Rendered above the current slide at z-10. Use for hero text, badges, or any overlay UI. |