Built-in slide indicators, slide navigations, and more configuration options.
Beautiful animations when navigating slide panels.
Effortless customization with out-of-the-box, built-in template options.

Trusted by the world’s leading companies

Overview

The Blazor Carousel component allows users to display images with content, links, and more, like a slide show. Typical uses of a carousel include scrolling news headlines, featured articles on home pages, and image galleries.

Overview of Blazor Carousel component.

Ease of use

The Blazor Carousel component provides flexible ways to configure the look and feel of the Carousel to match your requirement using several built-in options.

Animations

Navigate among slides smoothly with built-in “slide” and “cross-fade” animation effects. You can also provide custom animation effects.

Carousel Animation documentation

Auto play slides

Carousel slide transitions are performed continuously in specified time intervals. You can also customize the time intervals.

Looping slides

Carousel’s looping functionality allows users to loop back to the first item after reaching the last item.

Completely customizable UI

Customize the appearance of any part of the Carousel interface using HTML and CSS styles.

Navigation Buttons in Blazor Carousel component.

Allows the users to change the previous and next slides.

Play button in Blazor Carousel component.

Play button

Users can control the auto play slide functionality by using the play button.

Indicators in Blazor Carousel component.

Indicators

Users can show or hide the indicators to the carousel. Indicators provide quick navigation to any slide.

Accessibility

Fully supports WAI-ARIA accessibility practices to work with screen readers and assistive devices.
Follows WAI-ARIA best practices for implementing keyboard interaction.
Based on the WCAG 2.0 standards, the UI visual elements such as foreground color, background color, line spacing, text, and images have been designed.
Supports right-to-left (RTL) text direction for users working with right-to-left languages like Hebrew, Arabic, or Persian.

Developer-friendly APIs

Developers can control the appearance and behaviors of the Carousel component using a rich set of APIs.

Built-in themes

The Blazor Carousel component supports built-in themes such as Material, Bootstrap, Fabric (Office 365), Tailwind CSS, and high contrast. Users can customize these built-in themes or create new themes to achieve their desired look and feel by either simply overriding SASS variables or using our Theme Studio application.

Theme Studio application.

Blazor Carousel Code example

Easily get started with the Blazor Carousel using a few simple lines of C# code, as demonstrated below. Also, explore our Blazor Carousel Example, which shows you how to include the Blazor Carousel component with highlight customization.

Edit in Blazor Playground

razor

@using Syncfusion.Blazor.Navigations

<div class="control-container">
    <SfCarousel>
        <CarouselItem Interval="2000">
            <div class="slide-content">Slide 1</div>
        </CarouselItem>
        <CarouselItem Interval="4000">
            <div class="slide-content">Slide 2</div>
        </CarouselItem>
        <CarouselItem>
            <div class="slide-content">Slide 3</div>
        </CarouselItem>
        <CarouselItem Interval="6000">
            <div class="slide-content">Slide 4</div>
        </CarouselItem>
        <CarouselItem Interval="8000">
            <div class="slide-content">Slide 5</div>
        </CarouselItem>
    </SfCarousel>
</div>

<style>
    .control-container {
        background-color: #adb5bd;
        height: 300px;
        margin: 0 auto;
        width: 500px;
    }

    .e-carousel .slide-content {
        align-items: center;
        display: flex;
        font-size: 1.25rem;
        height: 100%;
        justify-content: center;
    }
</style>

Other supported frameworks

The Carousel component is also available in Angular, React, Vue, and JavaScript frameworks. Check out the component on other platforms using these links:

Our comprehensive competitor comparison of Blazor components will guide you to the perfect choice.

145+ UI components

1200+ interactive Blazor demos

3.2M+ downloads

Explore Complete Blazor Comparison

Not sure how to create your first Blazor Carousel? Our tutorial videos and documentation can help.

I’d love to read it now

ALL COMPONENTS

SMART COMPONENTS

GRIDS

DATA VISUALIZATION

CALENDARS

FILE VIEWERS & EDITORS

DROPDOWNS

NAVIGATION

INPUTS

LAYOUT

BUTTONS

INTERACTIVE CHAT

FORMS

NOTIFICATION

Our Customers Love Us

Having an excellent set of tools and a great support team, Syncfusion^® reduces customers’ development time.
Here are some of their experiences.

Blazor components

The speed how they adding new Blazor controls and update theirs functionality. I am using Blazor components. Searching for Blazor components I found that Syncfusion very fast adopted theirs controls for new development platform. Tech support is fast and excellent. The best of best is that they provide free controls for small business.