ui.carousel

Carousel

Slides that snap into place under a swipe, the wheel or the arrows — one at a time, several at once, or on autoplay.

A photo gallery

Every child is a slide. Arrows and dots appear on their own, and the arrows switch off at either end.

def gallery() -> None:
    with ui.carousel(classes="w-full max-w-xl"):
        for seed in ("cabin", "lake", "forest", "dunes", "harbor"):
            ui.image(src=f"https://picsum.photos/seed/{seed}/960/540",
                     alt=f"Holiday rental — {seed}", ratio="16/9")

Several at once

per_view= takes a number, or one per breakpoint: one card on a phone, three on a desktop. With more than one in view, the dots step aside.

Linen shirt€59

Canvas tote€24

Leather boots€149

Wool beanie€19

Denim jacket€89

Cotton scarf€29

def products() -> list[tuple[str, str, str]]:
    return [
        ("Linen shirt", "€59", "shirt"),
        ("Canvas tote", "€24", "tote"),
        ("Leather boots", "€149", "boots"),
        ("Wool beanie", "€19", "beanie"),
        ("Denim jacket", "€89", "denim"),
        ("Cotton scarf", "€29", "scarf"),
    ]


def several_at_once() -> None:
    with ui.carousel(per_view={"base": 1, "sm": 2, "lg": 3}, size="sm",
                     color="secondary", classes="[contain:inline-size]"):
        for name, price, seed in products():
            with ui.card(padding="none"):
                ui.image(src=f"https://picsum.photos/seed/{seed}/480/360",
                         alt=name, ratio="4/3")
                with ui.hstack(justify="between", classes="p-3"):
                    ui.text(name, weight="medium")
                    ui.text(price, color="muted")

Announcements on autoplay

autoplay=4 turns the page every four seconds, and stops for good the moment the reader touches it.

Dark mode is here

Every screen, every chart — flip it from the theme menu.

Invoices in 38 currencies

Bill your clients in theirs; we convert at the day's rate.

Webinar on Thursday

How Atlas Freight closes its books in two days. Seats are limited.

def announcements() -> None:
    with ui.carousel(autoplay=4, classes="w-full max-w-2xl"):
        for title, body, color in (
            ("Dark mode is here", "Every screen, every chart — flip it "
             "from the theme menu.", "primary"),
            ("Invoices in 38 currencies", "Bill your clients in theirs; "
             "we convert at the day's rate.", "success"),
            ("Webinar on Thursday", "How Atlas Freight closes its books "
             "in two days. Seats are limited.", "info"),
        ):
            with ui.card(padding="lg", color=color), ui.vstack(gap="xs"):
                ui.heading(title, level=3, size="lg")
                ui.text(body)

An onboarding tour

The buttons drive the carousel with .prev() and .next(); each slide change calls a Python handler that records how far the user got.

Create a project

Group boards, files and people around one goal.

Invite your team

Everyone sees the same board, live.

Connect your tools

Slack, GitHub and Google Drive in two clicks.

Ship it

Track the launch from the timeline.

1 of 4 screens seen

class Tour(ClientState):
    step: int = field(default=0)


class TourProgress(PageState):
    furthest: int = field(default=0)


def reached(step: str = "0") -> None:
    progress = TourProgress()
    progress.furthest = max(progress.furthest, int(step))


@refreshable(deps=[TourProgress])
def tour_progress() -> None:
    seen = TourProgress().furthest + 1
    ui.progress(value=seen, max=4, label=f"{seen} of 4 screens seen",
                show_label=True, size="sm")


def onboarding() -> None:
    tour = Tour()
    with ui.vstack(gap="md", classes="w-full max-w-xl [contain:inline-size]"):
        with ui.carousel(value=tour.step, on_change=reached) as slides:
            for icon, title, body in (
                ("folder-plus", "Create a project", "Group boards, files and "
                 "people around one goal."),
                ("user-plus", "Invite your team", "Everyone sees the same board, "
                 "live."),
                ("plug", "Connect your tools", "Slack, GitHub and Google "
                 "Drive in two clicks."),
                ("rocket", "Ship it", "Track the launch from the timeline."),
            ):
                with ui.card(padding="lg"), ui.vstack(gap="sm", align="center"):
                    ui.icon(icon, size="xl", color="primary")
                    ui.heading(title, level=3, size="lg")
                    ui.text(body, color="muted", align="center")
        tour_progress()
        with ui.hstack(gap="sm", justify="center"):
            ui.button("Back", variant="ghost", icon_left="arrow-left",
                      on_click=slides.prev())
            ui.button("Next", icon_right="arrow-right", on_click=slides.next())