Flowbite Blazor

Default Carousel #

Use this example to create a basic carousel with image slides. It includes navigation controls and indicators, and you can enable auto-advance by setting AutoAdvanceInterval.


<Carousel>
    <CarouselItem ImageSrc="/images/carousel/cosmic-timetraveler-pYyOZ8q7AII-unsplash.png" ImageAlt="Slide 1" />
    <CarouselItem ImageSrc="/images/carousel/johannes-plenio-RwHv7LgeC7s-unsplash.png" ImageAlt="Slide 2" />
    <CarouselItem ImageSrc="/images/carousel/mark-harpur-K2s_YE031CA-unsplash.png" ImageAlt="Slide 3" />
    <CarouselItem ImageSrc="/images/carousel/pietro-de-grandi-T7K4aEPoGGk-unsplash.png" ImageAlt="Slide 4" />
    <CarouselItem ImageSrc="/images/carousel/solotravelgoals-7kLufxYoqWk-unsplash.png" ImageAlt="Slide 5" />
    <CarouselControls />
    <CarouselIndicators />
</Carousel>

Auto-Advance Carousel #

Add automatic slide advancement by setting the AutoAdvanceInterval parameter. The carousel will automatically move to the next slide after the specified interval (in milliseconds).


<Carousel AutoAdvanceInterval="3000">
    <CarouselItem ImageSrc="/images/carousel/cristina-gottardi-CSpjU6hYo_0-unsplash.png" ImageAlt="Slide 1" />
    <CarouselItem ImageSrc="/images/carousel/jonatan-pie-3l3RwQdHRHg-unsplash.png" ImageAlt="Slide 2" />
    <CarouselItem ImageSrc="/images/carousel/sergey-pesterev-tMvuB9se2uQ-unsplash.png" ImageAlt="Slide 3" />
    <CarouselControls />
    <CarouselIndicators />
</Carousel>

Custom Content Slides #

Create slides with custom HTML content instead of just images. You can include any combination of text, images, buttons, and other components.

Welcome

First Slide

Explore

Second Slide

Discover

Third Slide


<Carousel>
    <CarouselItem>
        <div class="flex items-center justify-center h-full bg-gradient-to-r from-purple-500 to-pink-500 text-white">
            <div class="text-center">
                <h3 class="text-3xl font-bold mb-2">Welcome</h3>
                <p class="text-xl">First Slide</p>
            </div>
        </div>
    </CarouselItem>
    <CarouselItem>
        <div class="flex items-center justify-center h-full bg-gradient-to-r from-blue-500 to-cyan-500 text-white">
            <div class="text-center">
                <h3 class="text-3xl font-bold mb-2">Explore</h3>
                <p class="text-xl">Second Slide</p>
            </div>
        </div>
    </CarouselItem>
    <CarouselItem>
        <div class="flex items-center justify-center h-full bg-gradient-to-r from-green-500 to-teal-500 text-white">
            <div class="text-center">
                <h3 class="text-3xl font-bold mb-2">Discover</h3>
                <p class="text-xl">Third Slide</p>
            </div>
        </div>
    </CarouselItem>
    <CarouselControls />
    <CarouselIndicators />
</Carousel>

Indicator Position #

Control the position of slide indicators using the Position parameter. Choose between top and bottom placement.


<Carousel>
    <CarouselItem ImageSrc="/images/carousel/cosmic-timetraveler-pYyOZ8q7AII-unsplash.png" ImageAlt="Slide 1" />
    <CarouselItem ImageSrc="/images/carousel/johannes-plenio-RwHv7LgeC7s-unsplash.png" ImageAlt="Slide 2" />
    <CarouselItem ImageSrc="/images/carousel/mark-harpur-K2s_YE031CA-unsplash.png" ImageAlt="Slide 3" />
    <CarouselControls />
    <CarouselIndicators Position="CarouselIndicatorPosition.Top" />
</Carousel>

Image Fit Options #

Control how images fit within their containers using the ImageFit parameter. Options include Cover (default), Contain, Fill, ScaleDown, and None.


<Carousel>
    <CarouselItem ImageSrc="/images/carousel/cristina-gottardi-CSpjU6hYo_0-unsplash.png" 
                  ImageAlt="Cover (default)" 
                  ImageFit="CarouselImageFit.Cover" />
    <CarouselItem ImageSrc="/images/carousel/jonatan-pie-3l3RwQdHRHg-unsplash.png" 
                  ImageAlt="Contain" 
                  ImageFit="CarouselImageFit.Contain" />
    <CarouselItem ImageSrc="/images/carousel/sergey-pesterev-tMvuB9se2uQ-unsplash.png" 
                  ImageAlt="Fill" 
                  ImageFit="CarouselImageFit.Fill" />
    <CarouselControls />
    <CarouselIndicators />
</Carousel>

Without Controls #

Create a carousel without navigation controls, showing only the indicators. Useful for automatic slideshows or when you want a minimal interface.


<Carousel AutoAdvanceInterval="2500">
    <CarouselItem ImageSrc="/images/carousel/pietro-de-grandi-T7K4aEPoGGk-unsplash.png" ImageAlt="Slide 1" />
    <CarouselItem ImageSrc="/images/carousel/solotravelgoals-7kLufxYoqWk-unsplash.png" ImageAlt="Slide 2" />
    <CarouselItem ImageSrc="/images/carousel/cosmic-timetraveler-pYyOZ8q7AII-unsplash.png" ImageAlt="Slide 3" />
    <CarouselIndicators />
</Carousel>

Controlled Carousel #

Control the carousel programmatically using two-way binding with bind-Index. This allows you to synchronize the carousel with external controls or state.

Current slide: 1


<div class="space-y-4">
    <Carousel @bind-Index="_currentSlide">
        <CarouselItem ImageSrc="/images/carousel/johannes-plenio-RwHv7LgeC7s-unsplash.png" ImageAlt="Slide 1" />
        <CarouselItem ImageSrc="/images/carousel/mark-harpur-K2s_YE031CA-unsplash.png" ImageAlt="Slide 2" />
        <CarouselItem ImageSrc="/images/carousel/pietro-de-grandi-T7K4aEPoGGk-unsplash.png" ImageAlt="Slide 3" />
        <CarouselControls />
        <CarouselIndicators />
    </Carousel>
    <div class="flex gap-2 justify-center">
        <Button Size="ButtonSize.Small" OnClick="@(() => _currentSlide = 0)">Go to Slide 1</Button>
        <Button Size="ButtonSize.Small" OnClick="@(() => _currentSlide = 1)">Go to Slide 2</Button>
        <Button Size="ButtonSize.Small" OnClick="@(() => _currentSlide = 2)">Go to Slide 3</Button>
    </div>
    <p class="text-center">Current slide: @(_currentSlide + 1)</p>
</div>

@code {
    private int _currentSlide = 0;
}

Carousel Examples