Carousels
Focus Carousel
PROv1.0.0
A smooth scroll-based text animation component.
Preview
Description
FocusCarousel is a highly interactive image carousel where panels expand smoothly on hover or click, creating a strong focus-driven UX.
It supports responsive layouts, mobile adaptation, and a central indicator line that visually tracks the active panel. Ideal for portfolios, galleries, and modern landing pages.
Installation
npx dcntui add focus-carouselProps Table
| Prop | Type | Default | Description |
|---|---|---|---|
| images* | { src: string; alt: string }[] | — | Array of images to display in the carousel |
| panelWidthCollapsed | number | 20 | Width of non-focused panels |
| panelWidthExpanded | number | 400 | Width of the focused panel on desktop |
| panelWidthExpandedMobile | number | 100 | Width of the focused panel on mobile |
| panelGap | number | 5 | Gap between panels |
| panelCountDesktop | number | 20 | Number of panels shown on desktop |
| panelCountMobile | number | 10 | Number of panels shown on mobile |
| breakpointMobile | number | 1000 | Breakpoint for switching to mobile layout |
* Required prop