Layout

TwCarousel

TwCarousel is a Blazor carousel component. Bind SelectedIndex and configure AutoPlay, AutoPlayInterval, Loop, ShowArrows, ShowIndicators and swipe gestures.

Last updated 24 September 2026

Basic Carousel

Use TwCarousel and TwCarouselItem to cycle through a set of slides. Only the active slide is rendered.

Slide 1

Razor

<TwCarousel Style="height:240px;">
    <TwCarouselItem>
        <div class="flex h-full items-center justify-center bg-purple-600 text-white text-xl font-semibold">Slide 1</div>
    </TwCarouselItem>
    <TwCarouselItem>
        <div class="flex h-full items-center justify-center bg-fuchsia-600 text-white text-xl font-semibold">Slide 2</div>
    </TwCarouselItem>
    <TwCarouselItem>
        <div class="flex h-full items-center justify-center bg-blue-600 text-white text-xl font-semibold">Slide 3</div>
    </TwCarouselItem>
</TwCarousel>

Images: Object Fit

When a slide's content (e.g. an <img>) doesn't match the carousel's aspect ratio, use Tailwind's object-fit utilities to control how it fills the slide's h-full w-full space.

Razor

<div class="flex flex-wrap gap-2 mb-4">
    @foreach (var fit in objectFitOptions)
    {
        <TwButton Label="@fit.Label" Color="Color.Primary" Variant="@(selectedObjectFit == fit.Class ? ButtonVariant.Filled : ButtonVariant.Outlined)" OnClick="@(() => selectedObjectFit = fit.Class)" />
    }
</div>
<TwCarousel Style="height:500px;">
    <TwCarouselItem>
        <img src="_content/TwBlazor.Docs/images/placeholder-1.webp" alt="Placeholder 1" class="@($"h-full w-full {selectedObjectFit}")" />
    </TwCarouselItem>
    <TwCarouselItem>
        <img src="_content/TwBlazor.Docs/images/placeholder-2.webp" alt="Placeholder 2" class="@($"h-full w-full {selectedObjectFit}")" />
    </TwCarouselItem>
    <TwCarouselItem>
        <img src="_content/TwBlazor.Docs/images/placeholder-3.webp" alt="Placeholder 3" class="@($"h-full w-full {selectedObjectFit}")" />
    </TwCarouselItem>
    <TwCarouselItem>
        <img src="_content/TwBlazor.Docs/images/placeholder-4.webp" alt="Placeholder 4" class="@($"h-full w-full {selectedObjectFit}")" />
    </TwCarouselItem>
</TwCarousel>

CSHARP

@code {
    private static readonly (string Label, string Class)[] objectFitOptions =
    [
        ("Cover", "object-cover"),
        ("Contain", "object-contain"),
        ("Fill", "object-fill"),
        ("None", "object-none"),
        ("Scale Down", "object-scale-down"),
    ];
    
    private string selectedObjectFit = "object-cover";
}

Autoplay

Set AutoPlay to automatically advance slides. A pause/play control is always shown so playback can be stopped, and it also pauses automatically while hovered or focused.

Slide 1

Razor

<TwCarousel Style="height:240px;" AutoPlay AutoPlayInterval="TimeSpan.FromSeconds(3)">
    <TwCarouselItem>
        <div class="flex h-full items-center justify-center bg-green-800 text-white text-xl font-semibold">Slide 1</div>
    </TwCarouselItem>
    <TwCarouselItem>
        <div class="flex h-full items-center justify-center bg-yellow-600 text-white text-xl font-semibold">Slide 2</div>
    </TwCarouselItem>
    <TwCarouselItem>
        <div class="flex h-full items-center justify-center bg-red-600 text-white text-xl font-semibold">Slide 3</div>
    </TwCarouselItem>
</TwCarousel>

Indicator Color

Set Color to customize the active slide indicator's color.

Slide 1

Razor

<TwCarousel Style="height:240px;" Color="Color.Success">
    <TwCarouselItem>
        <div class="flex h-full items-center justify-center bg-gray-700 text-white text-xl font-semibold">Slide 1</div>
    </TwCarouselItem>
    <TwCarouselItem>
        <div class="flex h-full items-center justify-center bg-gray-800 text-white text-xl font-semibold">Slide 2</div>
    </TwCarouselItem>
    <TwCarouselItem>
        <div class="flex h-full items-center justify-center bg-gray-900 text-white text-xl font-semibold">Slide 3</div>
    </TwCarouselItem>
</TwCarousel>

Without Arrows or Indicators

Set ShowArrows and ShowIndicators to false to rely on swipe gestures or programmatic navigation only.

Slide 1

Razor

<TwCarousel Style="height:240px;" ShowArrows="false" ShowIndicators="false">
    <TwCarouselItem>
        <div class="flex h-full items-center justify-center bg-indigo-600 text-white text-xl font-semibold">Slide 1</div>
    </TwCarouselItem>
    <TwCarouselItem>
        <div class="flex h-full items-center justify-center bg-teal-600 text-white text-xl font-semibold">Slide 2</div>
    </TwCarouselItem>
</TwCarousel>

Non-Looping

Set Loop to false to disable the arrow buttons at the first and last slide instead of wrapping around.

Slide 1

Razor

<TwCarousel Style="height:240px;" Loop="false">
    <TwCarouselItem>
        <div class="flex h-full items-center justify-center bg-orange-800 text-white text-xl font-semibold">Slide 1</div>
    </TwCarouselItem>
    <TwCarouselItem>
        <div class="flex h-full items-center justify-center bg-pink-600 text-white text-xl font-semibold">Slide 2</div>
    </TwCarouselItem>
    <TwCarouselItem>
        <div class="flex h-full items-center justify-center bg-cyan-600 text-white text-xl font-semibold">Slide 3</div>
    </TwCarouselItem>
</TwCarousel>

Bound Selected Index

Bind SelectedIndex to control or observe the active slide from outside the carousel.

Selected slide: 1

Slide 1

Razor

<p class="mb-2">Selected slide: @(selectedIndex + 1)</p>
<TwCarousel Style="height:240px;" @bind-SelectedIndex="selectedIndex">
    <TwCarouselItem>
        <div class="flex h-full items-center justify-center bg-purple-700 text-white text-xl font-semibold">Slide 1</div>
    </TwCarouselItem>
    <TwCarouselItem>
        <div class="flex h-full items-center justify-center bg-purple-800 text-white text-xl font-semibold">Slide 2</div>
    </TwCarouselItem>
    <TwCarouselItem>
        <div class="flex h-full items-center justify-center bg-purple-900 text-white text-xl font-semibold">Slide 3</div>
    </TwCarouselItem>
</TwCarousel>

Custom Previous/Next Controls

Set LeftNavigation and RightNavigation to render your own previous/next controls instead of the default arrow buttons. Each is a RenderFragment<TwCarousel>, so its context exposes the carousel's public API (PreviousSlide, NextSlide, GoToSlide, ToggleAutoPlayPaused, and more) for your own markup to call.

Slide 1

Razor

<TwCarousel Style="height:240px;">
    <LeftNavigation>
        <TwButton Plain Class="absolute bottom-3 start-3 z-10 px-3 py-1.5 rounded-md bg-white text-purple-700 text-xs font-bold uppercase tracking-wide shadow-lg hover:bg-purple-50 transition-colors" AriaLabel="Previous slide" OnClick="context.PreviousSlide">
            Prev
        </TwButton>
    </LeftNavigation>
    <RightNavigation>
        <TwButton Plain Class="absolute bottom-3 end-3 z-10 px-3 py-1.5 rounded-md bg-white text-purple-700 text-xs font-bold uppercase tracking-wide shadow-lg hover:bg-purple-50 transition-colors" AriaLabel="Next slide" OnClick="context.NextSlide">
            Next
        </TwButton>
    </RightNavigation>
    <ChildContent>
        <TwCarouselItem>
            <div class="flex h-full items-center justify-center bg-purple-600 text-white text-xl font-semibold">Slide 1</div>
        </TwCarouselItem>
        <TwCarouselItem>
            <div class="flex h-full items-center justify-center bg-fuchsia-600 text-white text-xl font-semibold">Slide 2</div>
        </TwCarouselItem>
        <TwCarouselItem>
            <div class="flex h-full items-center justify-center bg-blue-600 text-white text-xl font-semibold">Slide 3</div>
        </TwCarouselItem>
    </ChildContent>
</TwCarousel>

Custom Indicators

Set Indicators to render your own slide-picker controls instead of the default dots. Its context exposes SelectedIndex and GoToSlide so your markup can both reflect and drive the active slide.

Slide 1

Razor

<TwCarousel Style="height:240px;">
    <Indicators>
        <div class="absolute bottom-2 inset-x-0 z-10 w-fit mx-auto flex justify-center gap-2">
            @for (var i = 0; i < 3; i++)
            {
                var index = i;
                <TwButton Plain Class="@(index == context.SelectedIndex ? "size-7 rounded-md bg-purple-600 text-white text-xs font-bold" : "size-7 rounded-md bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-200 text-xs font-bold hover:bg-gray-300 dark:hover:bg-gray-600")" AriaLabel="@($"Slide {index + 1} of 3")" aria-current="@(index == context.SelectedIndex ? "true" : "false")" OnClick="@(() => context.GoToSlide(index))">
                    @(index + 1)
                </TwButton>
            }
        </div>
    </Indicators>
    <ChildContent>
        <TwCarouselItem>
            <div class="flex h-full items-center justify-center bg-orange-800 text-white text-xl font-semibold">Slide 1</div>
        </TwCarouselItem>
        <TwCarouselItem>
            <div class="flex h-full items-center justify-center bg-pink-600 text-white text-xl font-semibold">Slide 2</div>
        </TwCarouselItem>
        <TwCarouselItem>
            <div class="flex h-full items-center justify-center bg-cyan-600 text-white text-xl font-semibold">Slide 3</div>
        </TwCarouselItem>
    </ChildContent>
</TwCarousel>

Theme Configuration

Styling is controlled by TwBlazorTheme.Components (a TwCarouselTheme), configured via the AddTwBlazor() options callback described on the Get Started page. Every property is a set of Tailwind classes, so changes are picked up by your own Tailwind build.

Property	Type	Controls
`Container`	string
`Viewport`	string
`Slide`	string
`SlideContent`	string
`ArrowButton`	string
`ArrowButtonStart`	string
`ArrowButtonEnd`	string
`PlayPauseButton`	string
`IndicatorContainer`	string
`Indicator`	string
`IndicatorActive`	string
`IndicatorInactive`	string

Full reference: TwCarouselTheme on the API docs.