Carousel

Carousel cycles through content — slides, cards, images, anything. Each direct child becomes one slide. The same component handles interactive slideshows (arrows, dots, swipe), auto-advancing reels, and continuously scrolling marquees, all through configuration.

​

Basic Usage

One slide visible at a time. Drag to navigate, or use the arrow buttons that appear on each side. Dots below show your position in the sequence:

​

Visibility

The visible parameter controls how many slides appear at once. It accepts integers and floats, each with different behavior.

​

Multiple Slides

Set visible to a whole number to show that many slides simultaneously. The carousel advances through any remaining slides that don’t fit. Use gap to add spacing between them:

​

Peek

A decimal value for visible shows partial slides at the edges. visible=1.3 means “show 1.3 slides” — one full slide plus 30% of the next one peeking in from the side:

​

Align

The align parameter controls where the active slide sits in the viewport. It only has a visible effect when visible is a non-integer (peek) or when showing multiple slides — with visible=1 every alignment looks the same since the slide fills the viewport.

• "start" (default) — active slide flush to the leading edge. Peek appears on the trailing side only.
• "center" — active slide centered. Peek appears equally on both sides.
• "end" — active slide flush to the trailing edge. Peek appears on the leading side only.

​

Dim Inactive

Reduce the opacity of slides that aren’t in focus. This draws the eye to the active slide while still showing what’s around it. Pairs naturally with peek:

​

Transitions

​

Fade

Crossfade between slides instead of sliding them. The outgoing slide fades out while the incoming one fades in, with no horizontal movement. Works well for ambient displays or hero images where the sliding motion would be distracting. In fade mode, gap is ignored so slides fill the viewport cleanly.

​

Auto Advance

Set auto_advance in milliseconds to cycle slides on a timer. The carousel pauses when the user hovers over it (disable with pause_on_hover=False). Loop is on by default, so it cycles forever:

​

Controls

​

Controls Position

Arrow buttons default to overlaying the slides. Set controls_position="outside" to place them outside the viewport — useful when the overlay would obscure content:

​

No Loop

Set loop=False to stop at the ends instead of wrapping around. The arrow buttons automatically disappear when there’s nowhere left to scroll:

​

Direction

Carousels scroll horizontally by default (direction="left"). Set direction="down" or direction="up" for vertical scrolling. The carousel automatically measures the first slide’s height to determine the viewport size. Vertical carousels are great for status feeds, departure boards, or cycling through messages in a fixed-height area: Set direction="right" to scroll in the opposite horizontal direction (content moves right to left).

​

Marquee

Set continuous=True for smooth, never-ending scroll. Unlike auto-advance which pauses between slides, continuous mode scrolls at a constant velocity — like a news ticker or stock tape. Control the speed from 1 (gentle drift) to 10 (racing). Children are automatically duplicated behind the scenes so the loop is seamless regardless of how many items you provide. Stack multiple marquees at different speeds for a layered, dynamic feel:

​

Sized Marquee Slides

Combine continuous with visible to control slide sizing within the marquee. Without visible, each item uses its natural width (badges wrap tightly). With visible=4, each item is sized to 25% of the viewport:

​

API Reference