A scroll-snap carousel. Compose it from nana-carousel-item slides and pick the navigation, layout and behaviour through attributes — one element covers basic, multi-item, card, gallery, hero and testimonial use-cases. Built on the native scroll container, so touch swipe, trackpad and momentum work for free; mouse drag, keyboard, autoplay and looping are layered on top.
Show code Copy < nana-carousel style = "width:100%" > < nana-carousel-item >< img src = "https://picsum.photos/seed/a/800/400" alt = "Slide A" style = "width:100%;display:block" ></ nana-carousel-item > < nana-carousel-item >< img src = "https://picsum.photos/seed/b/800/400" alt = "Slide B" style = "width:100%;display:block" ></ nana-carousel-item > </ nana-carousel >
npm install @nana-tec/ui-components
import " @nana-tec/ui-components/carousel " ;
< nana-carousel style = " width:100% " >
< nana-carousel-item >< img src = " https://picsum.photos/seed/a/800/400 " alt = " Slide A " style = " width:100%;display:block " ></ nana-carousel-item >
< nana-carousel-item >< img src = " https://picsum.photos/seed/b/800/400 " alt = " Slide B " style = " width:100%;display:block " ></ nana-carousel-item >
The navigation attribute controls the controls — arrows, dots,
progress, numbers, or a space-separated combo. Add loop to wrap around.
Show code Copy < nana-carousel navigation = "arrows dots" loop style = "width:100%" > < nana-carousel-item >< img src = "https://picsum.photos/seed/c/800/400" alt = "Slide 1" style = "width:100%;display:block" ></ nana-carousel-item > < nana-carousel-item >< img src = "https://picsum.photos/seed/d/800/400" alt = "Slide 2" style = "width:100%;display:block" ></ nana-carousel-item > < nana-carousel-item >< img src = "https://picsum.photos/seed/e/800/400" alt = "Slide 3" style = "width:100%;display:block" ></ nana-carousel-item > </ nana-carousel >
Show several slides at once with slides-per-view, and hint the next slide with
peek.
Show code Copy < nana-carousel slides-per-view = "3" peek navigation = "arrows dots" loop style = "width:100%" > < nana-carousel-item >< img src = "https://picsum.photos/seed/f/400/300" alt = "Item 1" style = "width:100%;display:block" ></ nana-carousel-item > < nana-carousel-item >< img src = "https://picsum.photos/seed/g/400/300" alt = "Item 2" style = "width:100%;display:block" ></ nana-carousel-item > < nana-carousel-item >< img src = "https://picsum.photos/seed/h/400/300" alt = "Item 3" style = "width:100%;display:block" ></ nana-carousel-item > < nana-carousel-item >< img src = "https://picsum.photos/seed/i/400/300" alt = "Item 4" style = "width:100%;display:block" ></ nana-carousel-item > < nana-carousel-item >< img src = "https://picsum.photos/seed/j/400/300" alt = "Item 5" style = "width:100%;display:block" ></ nana-carousel-item > </ nana-carousel >
Properties Property Attribute Type Default Description ariaLabelaria-labelstring | null'Carousel'Accessible label for the carousel region autoplay— booleanfalseAdvance automatically disabled— booleanfalseDisable all interaction draggable— booleantrueAllow mouse drag-to-scroll error— string | undefined—Error message — replaces the track with an alert interval— number5000Autoplay interval (ms) loading— booleanfalseShow a loading skeleton instead of slides loadingCountloading-countnumber3Number of skeleton slides while loading loop— booleanfalseWrap around at the ends navigation— string'arrows dots'Navigation controls — combine with spaces, e.g. "arrows dots" orientation— CarouselOrientation'horizontal'Scroll axis pauseOnHoverpause-on-hoverbooleantruePause autoplay on hover / focus peek— booleanfalseShow a peek of the adjacent slides (single-view only) slidesPerViewslides-per-viewnumber1Slides visible at once (multi-item / cards) variant— CarouselVariant'default'Visual style
Events Event Description nana-slide-changeFired when the active slide changes (`detail.index`, `detail.total`)
Slots Slot Description (default)One or more `nana-carousel-item` slides errorCustom error content (shown when `error` is set)
CSS parts Part Description ::part(base)The outer container ::part(viewport)The scrolling track ::part(nav-prev)The previous-slide button ::part(nav-next)The next-slide button ::part(pagination)The dots / numbers / progress row
CSS custom properties Property Description --nana-carousel-gapGap between slides --nana-carousel-radiusViewport corner radius --nana-carousel-accentActive dot / progress colour --nana-carousel-peekHow much of the neighbour peeks (peek mode) --nana-carousel-heightViewport height (vertical orientation)
Event Type Description nana-slide-changeCustomEventFired when the active slide changes (detail.index, detail.total)
Slot Description (default)One or more nana-carousel-item slides errorCustom error content (shown when error is set)
Variable Default Description --nana-carousel-gap— Gap between slides --nana-carousel-radius— Viewport corner radius --nana-carousel-accent— Active dot / progress colour --nana-carousel-peek— How much of the neighbour peeks (peek mode) --nana-carousel-height— Viewport height (vertical orientation)
Part Description baseThe outer container viewportThe scrolling track nav-prevThe previous-slide button nav-nextThe next-slide button paginationThe dots / numbers / progress row
Keyboard accessible Screen-reader labels Focus-visible states ARIA roles and states WCAG 2.2 AA contrast Explore Carousel interactively Every state, prop, and edge case — with live controls — in Storybook.
