Components / Carousel

Carousel

An embla-like carousel running on our own engine: real pointer drag, flick, momentum and snap, with loop, autoplay, vertical orientation and multi-slide layouts, and no embla dependency. C# owns the keyboard, autoplay timer and Previous / Next buttons; the engine owns the DOM transform and pointer handlers. Every preview below is the real component running in WebAssembly.

Examples

Drag a slide with the pointer (it flicks and snaps), or use the arrow buttons / keyboard arrow keys when the carousel is focused. With Loop the ends wrap, so Previous / Next never disable.

1
2
3
4
5
razor
<ZitsCarousel Loop class="mx-auto w-full max-w-xs">
    <ZitsCarouselContent>
        @for (var i = 1; i <= 5; i++)
        {
            var n = i;
            <ZitsCarouselItem>
                <div class="p-1">
                    <div class="flex aspect-square items-center justify-center rounded-xl border bg-card p-6 text-card-foreground shadow">
                        <span class="text-4xl font-semibold">@n</span>
                    </div>
                </div>
            </ZitsCarouselItem>
        }
    </ZitsCarouselContent>
    <ZitsCarouselPrevious />
    <ZitsCarouselNext />
</ZitsCarousel>

Autoplay

Set Autoplay (and optionally AutoplayInterval, in ms) to advance on a timer. The timer pauses while you hover or focus the carousel, then resumes when you leave.

1
2
3
4
5
razor
<ZitsCarousel Loop Autoplay AutoplayInterval="2000" class="mx-auto w-full max-w-xs">
    <ZitsCarouselContent>
        @for (var i = 1; i <= 5; i++)
        {
            var n = i;
            <ZitsCarouselItem>
                <div class="p-1">
                    <div class="flex aspect-square items-center justify-center rounded-xl border bg-card p-6 text-card-foreground shadow">
                        <span class="text-4xl font-semibold">@n</span>
                    </div>
                </div>
            </ZitsCarouselItem>
        }
    </ZitsCarouselContent>
    <ZitsCarouselPrevious />
    <ZitsCarouselNext />
</ZitsCarousel>

Orientation

Set Orientation="vertical" to scroll up and down. The track flips to a column, drag and the arrow keys follow the Y axis, and the Previous / Next buttons move to the top and bottom edges. Give the viewport a height so the slides clip.

1
2
3
4
5
razor
<ZitsCarousel Orientation="vertical" Loop class="mx-auto w-full max-w-xs">
    <ZitsCarouselContent class="h-[200px]">
        @for (var i = 1; i <= 5; i++)
        {
            var n = i;
            <ZitsCarouselItem>
                <div class="p-1">
                    <div class="flex items-center justify-center rounded-xl border bg-card p-6 text-card-foreground shadow">
                        <span class="text-3xl font-semibold">@n</span>
                    </div>
                </div>
            </ZitsCarouselItem>
        }
    </ZitsCarouselContent>
    <ZitsCarouselPrevious />
    <ZitsCarouselNext />
</ZitsCarousel>

Multiple items

Give each ZitsCarouselItem a Basis such as md:basis-1/2 to show several slides per view. It layers on top of the default basis-full, so smaller breakpoints still show one at a time.

1
2
3
4
5
6
razor
<ZitsCarousel Loop class="mx-auto w-full max-w-sm">
    <ZitsCarouselContent>
        @for (var i = 1; i <= 6; i++)
        {
            var n = i;
            <ZitsCarouselItem Basis="md:basis-1/2">
                <div class="p-1">
                    <div class="flex aspect-square items-center justify-center rounded-xl border bg-card p-6 text-card-foreground shadow">
                        <span class="text-3xl font-semibold">@n</span>
                    </div>
                </div>
            </ZitsCarouselItem>
        }
    </ZitsCarouselContent>
    <ZitsCarouselPrevious />
    <ZitsCarouselNext />
</ZitsCarousel>

Anatomy

Import the parts and compose them. ZitsCarousel owns the engine handle and cascades itself; the children read scroll state through that cascading context.

razor
<ZitsCarousel>
    <ZitsCarouselContent>
        <ZitsCarouselItem>...</ZitsCarouselItem>
        <ZitsCarouselItem>...</ZitsCarouselItem>
    </ZitsCarouselContent>
    <ZitsCarouselPrevious />
    <ZitsCarouselNext />
</ZitsCarousel>

Installation

Terminal bash
navius add carousel

API reference

ZitsCarousel: the root that owns the engine and scroll state.

Prop Type Default
Orientation string "horizontal"
Loop bool false
Align string "start"
SlidesToScroll int 1
Autoplay bool false
AutoplayInterval int 4000

ZitsCarouselItem: a single slide.

Prop Type Default
Basis string? null

ZitsCarouselContent, ZitsCarouselPrevious and ZitsCarouselNext take ChildContent plus any splatted attributes (including class). Previous / Next disable at the ends unless Loop is set.