Skip to main content

carousel

Function carousel 

Source
pub fn carousel(item_count: usize) -> CarouselBuilder
Expand description

Browse media collections with adaptive masks and scroll snapping.

§Usage

Browse photo albums, recommendations, and featured media collections.

§Parameters

  • item_count — number of items in the collection.
  • modifier, height — viewport placement, bounded width, and height (180dp by default).
  • variant — multi-browse, uncontained, mixed-aspect uncontained, hero, centered hero, or full-screen arrangement.
  • preferred_item_width — target width; defaults to 180dp for multi-browse/uncontained and the viewport for hero layouts; ignored in full-screen and mixed-aspect modes.
  • item_aspect_ratios — width/height ratios for mixed-aspect items, bounded to 9:16–16:9. Missing or invalid ratios use square items.
  • item_spacing — spacing between items: 16dp for full-screen, 8dp for mixed-aspect uncontained, and zero otherwise.
  • min_small_item_width, max_small_item_width — small-item bounds, 40dp and 56dp by default.
  • content_padding_start, content_padding_end — padding at collection ends; mixed-aspect uncontained defaults to 16dp at the start and zero at the end. Ignored in full-screen mode.
  • shape — mask shape; defaults to rectangular full-screen pages and circular 28dp corners otherwise.
  • controller — optional external scroll controller.
  • focus_requester — optional handle for focusing viewport keyboard navigation.
  • user_scroll_enabled — enables gestures, keyboard, and accessibility navigation.
  • reverse_layout — reverses the layout and its navigation direction.
  • fling_behavior — single-advance snapping by default, or free scrolling for uncontained layouts. Full-screen pages always snap.
  • accessibility_label — localized collection name.
  • content — item slot, measured at its full width regardless of its mask.

§Examples

use tessera_components::{
    carousel::{CarouselController, carousel},
    text::text,
};
use tessera_ui::{remember, tessera};

let mut controller = CarouselController::new(2);
controller.jump_to_item(4);
assert_eq!(controller.current_item(), 4);

#[tessera]
fn photos() {
    let controller = remember(|| CarouselController::new(2));
    assert_eq!(controller.with(CarouselController::current_item), 2);
    carousel(12).controller(controller).content(|item| {
        text(format!("Photo {}", item.index + 1));
    });
}