Home
GitHub New Project

Carousel

Previous Next

Displays the Carousel component. 

<Carousel Class="w-full max-w-xs">
    <CarouselContent>
        @foreach (var slide in slides)
        {
            <CarouselItem>
                <div class="p-1">
                    <Card>
                        <CardContent Class="flex aspect-square items-center justify-center p-6">
                            <span class="text-4xl font-semibold">@slide</span>
                        </CardContent>
                    </Card>
                </div>
            </CarouselItem>
        }
    </CarouselContent>
    <CarouselPrevious />
    <CarouselNext />
</Carousel>

@code {
    private static readonly int[] slides = [1, 2, 3, 4, 5];
}

Installation

Install the carousel component using the command or manual steps.

blazor-shadcn add carousel

Usage

@using BlazorShadcn.Components.UI
<Carousel Class="w-full max-w-xs">
    <CarouselContent>
        @foreach (var slide in slides)
        {
            <CarouselItem>
                <div class="p-1">
                    <Card>
                        <CardContent Class="flex aspect-square items-center justify-center p-6">
                            <span class="text-4xl font-semibold">@slide</span>
                        </CardContent>
                    </Card>
                </div>
            </CarouselItem>
        }
    </CarouselContent>
    <CarouselPrevious />
    <CarouselNext />
</Carousel>

@code {
    private static readonly int[] slides = [1, 2, 3, 4, 5];
}

Examples

Sizes

Use basis utilities on CarouselItem to control how many slides are visible at each breakpoint. 

<Carousel Class="w-full max-w-sm">
    <CarouselContent>
        @foreach (var slide in slides)
        {
            <CarouselItem Class="md:basis-1/2 lg:basis-1/3">
                <div class="p-1">
                    <Card>
                        <CardContent Class="flex aspect-square items-center justify-center p-6">
                            <span class="text-3xl font-semibold">@slide</span>
                        </CardContent>
                    </Card>
                </div>
            </CarouselItem>
        }
    </CarouselContent>
    <CarouselPrevious />
    <CarouselNext />
</Carousel>

@code {
    private static readonly int[] slides = [1, 2, 3, 4, 5];
}

Spacing

Override the default spacing with matching negative margin on CarouselContent and padding on each CarouselItem. 

<Carousel Class="w-full max-w-sm">
    <CarouselContent Class="-ml-1">
        @foreach (var slide in slides)
        {
            <CarouselItem Class="pl-1 md:basis-1/2 lg:basis-1/3">
                <div class="p-1">
                    <Card>
                        <CardContent Class="flex aspect-square items-center justify-center p-6">
                            <span class="text-2xl font-semibold">@slide</span>
                        </CardContent>
                    </Card>
                </div>
            </CarouselItem>
        }
    </CarouselContent>
    <CarouselPrevious />
    <CarouselNext />
</Carousel>

@code {
    private static readonly int[] slides = [1, 2, 3, 4, 5];
}

OrientationComing soon

Coming Soon

API

Use ApiChanged to capture the carousel API and StateChanged to react to selection changes.

Slide 1 of 5
<Carousel Class="w-full max-w-xs"
          ApiChanged="HandleCarouselApi"
          StateChanged="HandleCarouselStateChanged">
    <CarouselContent>
        @foreach (var slide in slides)
        {
            <CarouselItem>
                <Card>
                    <CardContent Class="flex aspect-square items-center justify-center p-6">
                        <span class="text-4xl font-semibold">@slide</span>
                    </CardContent>
                </Card>
            </CarouselItem>
        }
    </CarouselContent>
    <CarouselPrevious />
    <CarouselNext />
</Carousel>

<div class="py-2 text-center text-sm text-muted-foreground">
    Slide @(current + 1) of @count
</div>

@code {
    private static readonly int[] slides = [1, 2, 3, 4, 5];
    private int current;
    private int count = slides.Length;

    private Task HandleCarouselApi(CarouselApi carouselApi)
    {
        SyncCarouselState(carouselApi);
        return Task.CompletedTask;
    }

    private Task HandleCarouselStateChanged(CarouselApi carouselApi)
    {
        SyncCarouselState(carouselApi);
        return Task.CompletedTask;
    }

    private void SyncCarouselState(CarouselApi carouselApi)
    {
        current = carouselApi.SelectedIndex;
        count = carouselApi.SlideCount;
    }
}

AutoplayComing soon

Coming Soon

API Reference

Carousel

Prop Type Default
OrientationHorizontal | VerticalHorizontal
Classstring?null
ChildContentRenderFragment?null
ApiChangedEventCallback<CarouselApi>-
StateChangedEventCallback<CarouselApi>-

CarouselContent

Prop Type Default
Classstring?null
ChildContentRenderFragment?null

CarouselItem

Prop Type Default
Classstring?null
ChildContentRenderFragment?null

CarouselPrevious

Prop Type Default
VariantButtonVariantOutline
SizeButtonSizeIcon
Classstring?null
Disabledboolfalse
ChildContentRenderFragment?null

CarouselNext

Prop Type Default
VariantButtonVariantOutline
SizeButtonSizeIcon
Classstring?null
Disabledboolfalse
ChildContentRenderFragment?null

CarouselApi

The CarouselApi instance exposes CanScrollPrev, CanScrollNext, SelectedIndex, SlideCount, ScrollPrevAsync(), ScrollNextAsync(), and ScrollToAsync(int index). SelectedIndex is zero-based, so add 1 when rendering human-readable slide numbers.