Blazor Carousel

Blazor Carousel component is a slideshow component that cycles through elements, images, or slides of text.

Examples #

Here is a basic example of a carousel with three slides.

<Carousel>
    <CarouselItem Active="true">
        <Image Src="_content/BlazorBootstrap.Demo.RCL/images/carousel/slide-01.png" />
    </CarouselItem>
    <CarouselItem>
        <Image Src="_content/BlazorBootstrap.Demo.RCL/images/carousel/slide-02.png" />
    </CarouselItem>
    <CarouselItem>
        <Image Src="_content/BlazorBootstrap.Demo.RCL/images/carousel/slide-03.png" />
    </CarouselItem>
</Carousel>

Indicators #

You can add indicators to the carousel, alongside the previous/next controls. The indicators allow users to jump directly to a particular slide. Set ShowIndicators to true to show the indicators.

<Carousel ShowIndicators="true">
    <CarouselItem>
        <Image Src="_content/BlazorBootstrap.Demo.RCL/images/carousel/slide-01.png" />
    </CarouselItem>
    <CarouselItem>
        <Image Src="_content/BlazorBootstrap.Demo.RCL/images/carousel/slide-02.png" />
    </CarouselItem>
    <CarouselItem Active="true">
        <Image Src="_content/BlazorBootstrap.Demo.RCL/images/carousel/slide-03.png" />
    </CarouselItem>
</Carousel>

Captions #

You can add captions to your slides with the CarouselCaption component within any CarouselItem. They can be easily hidden on smaller viewports.

Earth Day

Let's unite to protect our planet and create a sustainable future for generations to come.

International Yoga Day

Embrace the ancient art of harmony for a healthier, happier you.

World Water Day

Every drop counts, let's protect our planet's most precious resource.

<Carousel ShowIndicators="true">
    <CarouselItem Active="true">
        <Image Src="_content/BlazorBootstrap.Demo.RCL/images/slide-04.png" />
        <CarouselCaption>
            <h2>Earth Day</h2>
            <p>Let's unite to protect our planet and create a sustainable future for generations to come.</p>
        </CarouselCaption>
    </CarouselItem>
    <CarouselItem>
        <Image Src="_content/BlazorBootstrap.Demo.RCL/images/slide-05.png" />
        <CarouselCaption>
            <h2>International Yoga Day</h2>
            <p>Embrace the ancient art of harmony for a healthier, happier you.</p>
        </CarouselCaption>
    </CarouselItem>
    <CarouselItem>
        <Image Src="_content/BlazorBootstrap.Demo.RCL/images/slide-06.png" />
        <CarouselCaption>
            <h2>World Water Day</h2>
            <p>Every drop counts, let's protect our planet's most precious resource.</p>
        </CarouselCaption>
    </CarouselItem>
</Carousel>

Crossfade #

To animate slides with a fading transition instead of sliding, set Crossfade to true.

<Carousel Crossfade="true">
    <CarouselItem Active="true">
        <Image Src="_content/BlazorBootstrap.Demo.RCL/images/carousel/slide-01.png" />
    </CarouselItem>
    <CarouselItem>
        <Image Src="_content/BlazorBootstrap.Demo.RCL/images/carousel/slide-02.png" />
    </CarouselItem>
    <CarouselItem>
        <Image Src="_content/BlazorBootstrap.Demo.RCL/images/carousel/slide-03.png" />
    </CarouselItem>
</Carousel>

Autoplaying carousels #

You can make your carousels autoplay on page load by setting the Autoplay parameter to CarouselAutoPlay.StartOnPageLoad. Autoplaying carousels automatically pause while hovered with the mouse.

<Carousel Autoplay="CarouselAutoPlay.StartOnPageLoad">
    <CarouselItem Active="true">
        <Image Src="_content/BlazorBootstrap.Demo.RCL/images/carousel/slide-01.png" />
    </CarouselItem>
    <CarouselItem>
        <Image Src="_content/BlazorBootstrap.Demo.RCL/images/carousel/slide-02.png" />
    </CarouselItem>
    <CarouselItem>
        <Image Src="_content/BlazorBootstrap.Demo.RCL/images/carousel/slide-03.png" />
    </CarouselItem>
</Carousel>

When the Autoplay parameter is set to CarouselAutoPlay.StartAfterUserInteraction, the carousel won’t automatically start to cycle on page load. Instead, it will only start after the first user interaction.

<Carousel Autoplay="CarouselAutoPlay.StartAfterUserInteraction">
    <CarouselItem Active="true">
        <Image Src="_content/BlazorBootstrap.Demo.RCL/images/carousel/slide-01.png" />
    </CarouselItem>
    <CarouselItem>
        <Image Src="_content/BlazorBootstrap.Demo.RCL/images/carousel/slide-02.png" />
    </CarouselItem>
    <CarouselItem>
        <Image Src="_content/BlazorBootstrap.Demo.RCL/images/carousel/slide-03.png" />
    </CarouselItem>
</Carousel>

Individual carousel item interval #

Add Interval parameter to a CarouselItem component to change the amount of time to delay between automatically cycling to the next item.

<Carousel Autoplay="CarouselAutoPlay.StartOnPageLoad">
    <CarouselItem Active="true" Interval="10000">
        <Image Src="_content/BlazorBootstrap.Demo.RCL/images/carousel/slide-01.png" />
    </CarouselItem>
    <CarouselItem Interval="2000">
        <Image Src="_content/BlazorBootstrap.Demo.RCL/images/carousel/slide-02.png" />
    </CarouselItem>
    <CarouselItem>
        <Image Src="_content/BlazorBootstrap.Demo.RCL/images/carousel/slide-03.png" />
    </CarouselItem>
</Carousel>

Autoplaying carousels without controls #

Hide the controls by setting ShowPreviousNextControls parameter to false.

<Carousel Autoplay="CarouselAutoPlay.StartOnPageLoad" ShowPreviousNextControls="false">
    <CarouselItem Active="true">
        <Image Src="_content/BlazorBootstrap.Demo.RCL/images/carousel/slide-01.png" />
    </CarouselItem>
    <CarouselItem>
        <Image Src="_content/BlazorBootstrap.Demo.RCL/images/carousel/slide-02.png" />
    </CarouselItem>
    <CarouselItem>
        <Image Src="_content/BlazorBootstrap.Demo.RCL/images/carousel/slide-03.png" />
    </CarouselItem>
</Carousel>

Disable touch swiping #

Carousels support swiping left/right on touchscreen devices to move between slides. This can be disabled by setting the Touch option to false.

<Carousel Touch="false">
    <CarouselItem Active="true">
        <Image Src="_content/BlazorBootstrap.Demo.RCL/images/carousel/slide-01.png" />
    </CarouselItem>
    <CarouselItem>
        <Image Src="_content/BlazorBootstrap.Demo.RCL/images/carousel/slide-02.png" />
    </CarouselItem>
    <CarouselItem>
        <Image Src="_content/BlazorBootstrap.Demo.RCL/images/carousel/slide-03.png" />
    </CarouselItem>
</Carousel>

Events #

Blazor Bootstrap Carousel component exposes a two events for hooking into Carousel functionality.

Event Name	Description
`Onslide`	Fires immediately when the slide instance method is invoked.
`Onslid`	Fired when the carousel has completed its slide transition.

<Carousel Onslid="Onslid" Onslide="Onslide">
    <CarouselItem Active="true">
        <Image Src="_content/BlazorBootstrap.Demo.RCL/images/carousel/slide-01.png" />
    </CarouselItem>
    <CarouselItem>
        <Image Src="_content/BlazorBootstrap.Demo.RCL/images/carousel/slide-02.png" />
    </CarouselItem>
    <CarouselItem>
        <Image Src="_content/BlazorBootstrap.Demo.RCL/images/carousel/slide-03.png" />
    </CarouselItem>
</Carousel>

@code {
    [Inject]
    ToastService ToastService { get; set; } = default!;
    private void Onslid(CarouselEventArgs e)
    {
        var message = new ToastMessage
            {
                Type = ToastType.Secondary,
                Title = "Carousel Events",
                HelpText = $"{DateTime.Now}",
                Message = $"Onslid: from={e.From}, to={e.To}"
            };
        ToastService.Notify(message);
    }

    private void Onslide(CarouselEventArgs e)
    {
        var message = new ToastMessage
            {
                Type = ToastType.Secondary,
                Title = "Carousel Events",
                HelpText = $"{DateTime.Now}",
                Message = $"Onslide: from={e.From}, to={e.To}"
            };
        ToastService.Notify(message);
    }
}

NOTE: All of the images were generated using Microsoft Designer.

If you like Blazor Bootstrap, give it a star on GitHub!