A wider screen, please

This page features interactive demos and side-by-side code samples that need at least 340 pixels of horizontal space. Please widen your browser window, or rotate your device, to continue.

Morpheus v0.1.0
v0.1.0
Morpheus Components Carousel Settings

Carousel#

Component <neo-carousel> is a scroll-snap carousel over a native <neo-carousel-track> with <neo-carousel-slide> children. Scrolling runs on the compositor via overflow + scroll-snap-type; JS only wires prev / next, keyboard, and active-slide tracking. Add <neo-button data-neo-carousel-prev> / <neo-button data-neo-carousel-next> to opt into arrow controls and the boolean dots attribute to opt into the dot pagination (rendered in the host's shadow root).

Deactivate Rename Duplicate
Delete New state Toggle autoplay
HTML CSS

The selected state's markup and its scoped CSS. The CSS is wrapped in <style>@scope { ... }</style> and applies to the preview only. Edits change the preview above, applied live while Sync is on, or when you click Patch or Replace. Patch morphs the preview; Replace swaps it outright.

Replace Patch

Signals

Datastar signals declared in the selected state's markup. Change a value to drive the preview, applied live while Sync is on, or when you click Patch.

Patch

Reference#

Attributes #

NameTypeDefaultDescription
valuestring reflected observednoneActive slide value. Falls back to the first slide when unset. An external patch sets the slide instantly (jump); a fat morph that drops it is no command, so the current slide stays. The carousel's own navigation always animates.
orientation"horizontal" | "vertical" observedhorizontalLayout axis. Vertical mode uses y-axis scrolling and up / down arrow keys.
per-viewnumber | "auto" observed1Visible slides per view. Use auto to keep each slide's intrinsic size.
spacinglength observednoneGap between slides; accepts any CSS length.
align"start" | "center" | "end" observedstartWhere the active slide snaps inside the viewport.
loopboolean observedfalseWrap prev / next and autoplay past the ends.
touchtrue | false observedtrueNative gesture scrolling. Set touch="false" to disable it; buttons and keyboard navigation still work.
autoplaynumber (ms) observednoneMilliseconds between automatic advances. Unset disables autoplay; use paused or a data-neo-carousel-pause button to suspend.
autoplay-stepnumber observed1Slides advanced per autoplay tick. Only applies when per-view is greater than 1.
pausedboolean reflected observedfalseSuspends autoplay without removing the interval. Toggled by data-neo-carousel-pause buttons and by Space while the host is focused.
aria-labelstringnoneAccessible name for the carousel region.
easingstring observednoneTiming for programmatic scrolls. Use a duration ("600ms") or duration plus timing function. Falls back to theme --neo-easing and respects reduced motion.
animate-patchbooleanfalseAnimate external value patches (using easing) instead of jumping. Read per patch: set it alongside value to glide one transition, omit it to jump the next.
highlight-activebooleanfalseOpt-in visibility styling. Off-screen slides dim to --neo-carousel-slide-inactive-opacity and visible slides remain opaque. The kit also writes data-neo-carousel-slide-visibility for custom styling.
click-navbooleanfalseClick a slide to activate it. Interactive content inside slides keeps its normal click behavior.
drag-navbooleanfalseMouse / pen drag scrolls the track. Touch keeps native scrolling; ignored when touch="false".
auto-activatebooleanfalseArrow keys on a focused dot also commit the slide during the focus move (mirrors neo-tabs). Without it, arrow keys are focus-only and Enter / Space commits.
dotsbooleanfalseRenders the dot tablist in the host's shadow root. Position / style via ::part(dots) and ::part(dot); customize per-dot inner markup with <template data-neo-carousel-dot>.
stepnumbernoneSlides advanced per prev / next / arrow press. Defaults to per-view so each press exposes a whole new visible group; set to 1 (or any N) for finer stepping.

Slots #

NameDescription
defaultTrack, slides, and optional navigation controls.
<template data-neo-carousel-dot>Optional. Cloned into each dot button for custom inner markup; the kit still owns the button styling (focus, aria-current, data-neo-carousel-dot-visibility).
[data-neo-carousel-prev]Previous-slide trigger.
[data-neo-carousel-next]Next-slide trigger.
[data-neo-carousel-pause]Toggles paused; mirrors state via aria-pressed and disables when autoplay is unset.
[data-neo-carousel-when-playing]Child of [data-neo-carousel-pause] shown while playing (button not pressed); the kit hides it when paused.
[data-neo-carousel-when-paused]Child of [data-neo-carousel-pause] shown while paused (button pressed); the kit hides it while playing.

Events #

NameDetailBubblesDescription
neo-carousel-change{ value: string, index: number }yesFires after the active slide changes. index is zero-based.

Parts #

NameDescription
::part(dots)Dot tablist container in the shadow root. Position and lay it out from the page.
::part(dot)Each dot button.
::part(dot-partial)Added to a dot whose slide is partially visible.
::part(dot-full)Added to a dot whose slide is fully visible.
::part(dot-current)Added to the active dot.

CSS variables #

NameDefaultDescription
--neo-carousel-spacing1remGap between slides.
--neo-carousel-track-radiusvar(--page-radius, 0)Track corner radius.
--neo-carousel-focus-ringvar(--accent, currentColor)Track focus-visible outline color.
--neo-carousel-dot-size0.55remDot diameter.
--neo-carousel-dot-gap0.4remGap between dots.
--neo-carousel-dot-bgcolor-mix(in srgb, var(--page-fg) 25%, transparent)Inactive dot color.
--neo-carousel-dot-active-bgvar(--accent, currentColor)Active dot color.
--neo-carousel-dot-radius999pxDot corner radius.
--neo-carousel-slide-inactive-opacity0.55Off-screen slide opacity under highlight-active. Set to 1 to disable dimming.
--neo-carousel-slide-transition200ms var(--neo-easing, ease-out)Slide opacity transition under highlight-active.

Examples#

Multiple slides per view#

Show more than one slide with per-view="N". Use spacing to set the gap.

123456
HideHTMLTemplCSS

Intrinsic widths#

Use per-view="auto" when slides should keep their own widths.

XXLXLLMSXS
HideHTMLTemplCSS

Card deck#

Card slides with center snap, mouse drag, click navigation, and visible-slide highlighting.

Terracotta lekythos (oil flask)

Terracotta lekythos (oil flask)

Attributed to the Amasis Painter

ca. 550–530 BCE
Lekythos (oil flask)

Lekythos (oil flask)

Attributed to Hermonax

ca. 460 BCE
Terracotta amphora (jar)

Terracotta amphora (jar)

Attributed to the Amasis Painter

ca. 550 BCE
Terracotta lekythos (oil flask)

Terracotta lekythos (oil flask)

Attributed to the Amasis Painter

ca. 550–530 BCE
Terracotta amphora (jar)

Terracotta amphora (jar)

Attributed to the Berlin Painter

ca. 490 BCE
Terracotta olpe (jug)

Terracotta olpe (jug)

Attributed to the Amasis Painter

ca. 520 BCE
Terracotta oinochoe: olpe (jug)

Terracotta oinochoe: olpe (jug)

Related to the Group of the Early Olpai

1st half of 6th century BCE
HideHTMLTemplCSS

Custom navigation styling#

Dots live in the host's shadow root. Reach them from the page via ::part(dots) (the tablist container) and ::part(dot) (each button); the kit also mirrors state into named parts (::part(dot-partial), ::part(dot-full), ::part(dot-current)) so you can style the three visibility states and the active dot. Here a scoped <style> block turns the buttons into bars.

12345678
HideHTMLTemplCSS

Autoplay + loop#

Set autoplay="3000" to advance on a timer. Add loop and an optional pause button.

First Second Third PausePlay
HideHTMLTemplCSS

Custom easing#

Use easing to customize programmatic scrolls. Durations can also reuse the theme easing.

1234
HideHTMLTemplCSS

Vertical#

Set orientation="vertical" to get a y-axis carousel. Give the host a height.

Top Middle Bottom
HideHTMLTemplCSS

No touch#

Use touch="false" when gestures should belong to slide content. Buttons and keyboard still work.

123
HideHTMLTemplCSS

100 slides#

For large slide sets, skip dots and use buttons, wheel, or touch navigation.

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100
HideHTMLTemplCSS

Settings

Theme

Default Sunshine Ocean Matrix Rose☀ ◐ ☾

Accessibility

Playgrounds

Server Simulator