Carousel
Looping slides with explicit state and stable SSR.
Sequenced content
One active slide, one lifecycle
Navigation, indicators, keyboard input and autoplay all update the same reactive selection.
Looping
Next after the last slide starts at the beginning.
Autoplay
A positive interval advances only while the control is mounted.
SSR states
The server can expose every slide or only the active one.
Autoplay carousel
Previous, Next and every indicator remain explicit actions while the timer is active.
Atlas
1. Architecture that keeps moving
The carousel owns the active state while the slide renderer stays declarative.
State
Looping sequence
Signal
2. Auto-advance without hidden magic
A lifecycle-bound timer rotates the same explicit active-index property.
State
Looping sequence
Northwind
3. SSR can surface every state
Stable dynamic ranges keep the server and hydration structure aligned.
State
Looping sequence
Harbor
4. Wrap-around is part of the contract
The next step after the right edge returns to the beginning.
State
Looping sequence
1 / 4
Active slide: 1 / 4 | autoAdvanceMs = 2600
Carousel DSL
The contextual renderer owns only the content of one slide.
scala
carousel[SlideCard] {
items = slides
autoAdvanceMs = 2600
ssrShowAllStates = true
slideRenderer = (slide: SlideCard, index: Int) =>
renderSlide(slide, index)
}
Loop
No dead right edge
next(), previous() and indicators share the same normalized active index.
Timer
Autoplay remains disposable
Changing the interval replaces the timer; unmounting always clears it.
Hydration
Both modes keep one tree shape
Active-only mode uses a dynamic mount point on the server and in the browser.