Components / Conversation and media

Carousel

A strip of slides the user drags or steps through, one at a time.

Functions: cui_carousel, cui_carousel_slide

Usage

static int slide = 0;
cui_carousel(ui, "tour", 4, &slide, .height = 200, .auto_advance = 6) {
    for (int k = 0; k < 4; k++) cui_carousel_slide(ui) { draw_slide(ui, k); }
}

Drag or flick between slides, scroll sideways, use the arrow buttons, the dots or the arrow keys. The track settles on a spring. auto_advance moves on every few seconds, except while hovered; loop wraps around.

slide is your int, the index of the slide in view. The carousel reads and writes it, keeps it between 0 and count - 1, and glides to a value you set from code. The block must build all count slides on every frame, each inside cui_carousel_slide: slides out of view are clipped, not skipped. height is in points (220) and gap is the space between slides (12). auto_advance is in seconds; after the last slide it starts again at the first, even without loop.

Keyboard

• Drag or flick between slides, scroll sideways, use the arrow buttons, the dots or the arrow keys.
• Tab focuses the slides, and Left and Right step to the previous and the next slide.

Options of cui_carousel

Option	Type	Default	Description
.height	float		Height in points; 0 uses the component's own.
.auto_advance	float		seconds on a slide before it moves to the next, paused while hovered; 0 turns it off
.gap	float		Space between the items, in points.
.no_arrows	bool		hides the previous and next arrows that show on hover
.no_dots	bool		hides the row of page dots under the slides
.loop	bool		past the last slide comes the first again, and back from the first the last

Related

• Image compare and card stack: A divider that reveals one picture over another, and a stack of cards the user swipes through.
• Presence, counter and ticker: Small live pieces: who is here now, a number that rolls when it changes, and a line of text that scrolls past.
• Image viewer and cropper: A picture you can zoom and pan, and a crop tool with a frame you drag.
• Comments: A comment with its author, time, replies indented under it and a like button.