Introducing the New Blazor Carousel Component
Tags: blazor, csharp, dotnet, webdev
Published: 2022-05-25 12:03:14

---
title: Introducing the New Blazor Carousel Component
published: true
date: 2022-05-25 11:31:46 UTC
tags: blazor, csharp, dotnet, webdev
canonical_url: https://www.syncfusion.com/blogs/post/introducing-the-new-blazor-carousel-component.aspx
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5zxtguvpoc6ug3nmgho2.png
---

We are happy to introduce the new [Carousel](https://www.syncfusion.com/blazor-components/blazor-carousel "Blazor Carousel Component") component to the Blazor suite in our [2022 Volume 1 release](https://www.syncfusion.com/forums/174125/essential-studio-2022-volume-1-main-release-v20-1-0-47-is-available-for-download "Essential Studio 2022 Volume 1 Release"). The Blazor Carousel component has been one of the most anticipated and upvoted components in our [feedback portal](https://www.syncfusion.com/feedback/12121/carousel-component-in-blazor "Syncfusion Blazor Feedback Portal").

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

Let’s explore the Blazor Carousel component, its UI design, and its features with code examples.

## Blazor Carousel overview

The Blazor Carousel component is a responsive and completely customizable control. Its built-in options provide the flexibility to create slides and configure its look and feel to match your requirements. It also supports web-standard functionalities like accessibility, keyboard interactions, and events.

## Key features

The key features of the new Blazor Carousel component are as follows:

- [Slide creation.](#create-slides)
- [Navigation buttons.](#navigation-button)
- [Play/pause button.](#play/pause-button)
- [Indicators.](#indicators)
- [Animation and transitions.](#animation-and-transitions)
- [WAI-ARIA compliance and keyboard accessibility.](#wai-aria-compliance-and-keyboard-accessibility)

### Create slides

Slides are super easy to create in the Blazor Carousel component. Design your own slide content and assign it to the **CarouselItem** as shown in the following code example.

```html
<div class="control-container">
    <SfCarousel>
        <CarouselItem>
            <figure class="img-container">
                <img src="images/carousel/bridge.png" alt="Golden Gate Bridge, San Francisco" style="height:100%;width:100%;" />
                <figcaption class="img-caption">Golden Gate Bridge, San Francisco</figcaption>
            </figure>
        </CarouselItem>
        <CarouselItem>
            <figure class="img-container">
                <img src="images/carousel/trees.png" alt="Spring Flower Trees" style="height:100%;width:100%;" />
                <figcaption class="img-caption">Spring Flower Trees</figcaption>
            </figure>
        </CarouselItem>
        <CarouselItem>
            <figure class="img-container">
                <img src="images/carousel/waterfall.png" alt="Oddadalen Waterfalls, Norway" style="height:100%;width:100%;" />
                <figcaption class="img-caption">Oddadalen Waterfalls, Norway</figcaption>
            </figure>
        </CarouselItem>
        <CarouselItem>
            <figure class="img-container">
                <img src="images/carousel/sea.png" alt="Anse Source d'Argent, Seychelles" style="height:100%;width:100%;" />
                <figcaption class="img-caption">Anse Source d'Argent, Seychelles</figcaption>
            </figure>
        </CarouselItem>
        <CarouselItem>
            <figure class="img-container">
                <img src="images/carousel/rocks.png" alt="Stonehenge, England" style="height:100%;width:100%;" />
                <figcaption class="img-caption">Stonehenge, England</figcaption>
            </figure>
        </CarouselItem>
    </SfCarousel>
</div>

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

    .img-container {
        height: 100%;
    }

    .img-caption {
        bottom: 4em;
        color: #fff;
        font-size: 12pt;
        height: 2em;
        position: relative;
        padding: 0.3em 1em;
        text-align: center;
        width: 100%;
    }
</style>
```

The following image shows the output of this example.

![Creating Slides in Blazor Carousel Component](https://www.syncfusion.com/blogs/wp-content/uploads/2022/05/Creating-Slides-in-Blazor-Carousel-Component-1.png)
<figcaption>Creating Slides in Blazor Carousel Component</figcaption>

### Navigation buttons

The Previous and Next [navigation](https://blazor.syncfusion.com/documentation/carousel/navigators-and-indicators "Navigators and Indicators in Blazor Carousel Component documentation") buttons are used to perform slide transitions manually. You can show or hide them using the [ButtonsVisibility](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfCarousel.html#Syncfusion_Blazor_Navigations_SfCarousel_ButtonsVisibility "ButtonsVisibility property of Blazor Carousel Component") property. The property values can be any of the following:

- **Hidden** : Hide the navigator buttons.
- **Visible** : Show the navigator buttons.
- **VisibleOnHover** : Show the navigator buttons only when hovering over the Carousel.

Also, you can use the [template](https://blazor.syncfusion.com/documentation/carousel/navigators-and-indicators#previous-and-next-button-template "Previous and next button templates in Blazor Carousel Component") options to customize the navigation buttons.

The following code example demonstrates how to show the navigator buttons on the mouse hover in the Carousel component.

```html
<div class="control-container">
    <SfCarousel ButtonsVisibility="CarouselButtonVisibility.VisibleOnHover">
        <CarouselItem>
            <div class="slide-content">Slide 1</div>
        </CarouselItem>
        <CarouselItem>
            <div class="slide-content">Slide 2</div>
        </CarouselItem>
        <CarouselItem>
            <div class="slide-content">Slide 3</div>
        </CarouselItem>
        <CarouselItem>
            <div class="slide-content">Slide 4</div>
        </CarouselItem>
        <CarouselItem>
            <div class="slide-content">Slide 5</div>
        </CarouselItem>
    </SfCarousel>
</div>

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

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

### Play/pause button

You can control the autoplay slide functionality using the play button. The [ShowPlayButton](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfCarousel.html#Syncfusion_Blazor_Navigations_SfCarousel_ShowPlayButton "ShowPlayButton property of Blazor Carousel Component") property is used to show or hide the play button in the user interface. You can also customize the play button using the [template](https://blazor.syncfusion.com/documentation/carousel/navigators-and-indicators#play-button-template "Play button template of Blazor Carousel Component") option.

Refer to the following image.

![Play/Pause Button in Blazor Carousel Component](https://www.syncfusion.com/blogs/wp-content/uploads/2022/05/Play-and-pause-Button-in-Blazor-Carousel-Component.png)
<figcaption>Play/Pause Button in Blazor Carousel Component</figcaption>

### Indicators

Indicators in the Blazor Carousel component depict the total slides and currently active slide. You can show or hide the indicators using the [ShowIndicators](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfCarousel.html#Syncfusion_Blazor_Navigations_SfCarousel_ShowIndicators "ShowIndicators property of Blazor Carousel Component") property, and show a preview of a slide or thumbnail in the indicators by using the [IndicatorsTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfCarousel.html#Syncfusion_Blazor_Navigations_SfCarousel_IndicatorsTemplate "IndicatorsTemplate property of Blazor Carousel Component") property.

Refer to the following image.

![Indicators in Blazor Carousel Component](https://www.syncfusion.com/blogs/wp-content/uploads/2022/05/Indicators-in-Blazor-Carousel-Component-1.png)
<figcaption>Indicators in Blazor Carousel Component</figcaption>

**Note** : For more details on previewing slides, check out the [template examples in the Blazor Carousel component](https://blazor.syncfusion.com/demos/carousel/templates?theme=bootstrap5 "Example of Templates in Blazor Carousel Component").

### Animation and transitions

You can smoothly navigate among the slides with the built-in **slide** and **cross-fade** [animation](https://blazor.syncfusion.com/documentation/carousel/animations-and-transitions "Animations and Transitions in Blazor Carousel Component") effects.

The Carousel provides auto-play functionality wherein a slide transition is performed after a specified or default interval. On reaching the last slide, the slides will be repeated with the selected transition by default.

You can enable or disable infinite slide transitions using the [loop](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfCarousel.html#Syncfusion_Blazor_Navigations_SfCarousel_Loop "Loop property of Blazor Carousel Component") property.

### WAI-ARIA compliance and keyboard accessibility

We have designed the Carousel component based on [WAI-ARIA](https://www.w3.org/TR/wai-aria-practices/ "WAI-ARIA Authoring Practices 1.2 documentation") specifications, applying WAI-ARIA roles, states, and properties along with keyboard support for people who use assistive devices.

Also, you can easily interact with the Blazor Carousel component using the following keyboard shortcuts:

<table width="490">
<thead>
<tr>
<td width="81"><strong>Key</strong></td>
<td width="403"><strong>Functionality</strong></td>
</tr>
</thead>
<tbody>
<tr style="background: none;">
<td width="81">Arrow keys</td>
<td width="403">Navigate between slides.</td>
</tr>
<tr>
<td width="81">Home</td>
<td width="403">Navigate to the first slide.</td>
</tr>
<tr>
<td width="81">End</td>
<td width="403">Navigate to the last slide.</td>
</tr>
<tr>
<td width="81">Space</td>
<td width="403">Play or pause the slide transitions.</td>
</tr>
<tr>
<td width="81">Enter</td>
<td width="403">Perform the action in focus.</td>
</tr>
</tbody>
</table>

## References

For more details, refer to our [Getting Started with Blazor Carousel Component documentation](https://blazor.syncfusion.com/documentation/carousel/getting-started/ "Getting Started with Blazor Carousel Component documentation") and [demos](https://blazor.syncfusion.com/demos/carousel/default-functionalities?theme=bootstrap5 "Example of Default Functionalities in Blazor Carousel Component").

## What’s coming in 2022 Volume 2

We are planning to include the following features in the Blazor Carousel component for the 2022 Volume 2 release:

- Show one complete slide and a partial view of the adjacent (previous and next) slides simultaneously.
- Provide custom animations in slide transitions.
- Upgrade the Blazor Carousel component to be production-ready.

## Conclusion

Thanks for reading! We hope you enjoyed this quick introduction to the [Blazor Carousel](https://www.syncfusion.com/blazor-components/blazor-carousel "Blazor Carousel Component") component which rolled out in the [2022 Volume 1](https://www.syncfusion.com/forums/174125/essential-studio-2022-volume-1-main-release-v20-1-0-47-is-available-for-download "Essential Studio 2022 Volume 1 Release") release. Try out this great control and provide your feedback in the comments section below. Also, check out our [Release Notes](https://help.syncfusion.com/common/essential-studio/release-notes/v20.1.0.47 "Syncfusion Release Notes") and [What’s New](https://www.syncfusion.com/products/whatsnew "Syncfusion What’s New") pages to see all the new updates in this release.

The Carousel component is also available in our [Angular](https://www.syncfusion.com/angular-ui-components/angular-carousel "Angular Carousel Component"), [React](https://www.syncfusion.com/react-ui-components/react-carousel "React Carousel Component"), [Vue](https://www.syncfusion.com/vue-ui-components/vue-carousel "Vue Carousel Component"), [JavaScript](https://www.syncfusion.com/javascript-ui-controls/js-carousel "JavaScript Carousel Component"), ASP.NET ([Core](https://www.syncfusion.com/aspnet-core-ui-controls/carousel "ASP.NET Core Carousel Component") and [MVC](https://www.syncfusion.com/aspnet-mvc-ui-controls/carousel "ASP.NET MVC Carousel Component")), [WinForms](https://www.syncfusion.com/winforms-ui-controls/carousel "WinForms Carousel Component"), [WPF](https://www.syncfusion.com/wpf-controls/carousel "WPF Carousel Component"), [Xamarin](https://www.syncfusion.com/xamarin-ui-controls/xamarin-carousel-view "Xamarin.Forms Carousel Component"), and [UWP](https://www.syncfusion.com/uwp-ui-controls/carousel "UWP Carousel Component") platforms. Try it out in your platform of choice and enjoy hassle-free slide navigation!

As always, you can contact us through our [support forums](https://www.syncfusion.com/forums "Syncfusion support forum"), [support portal](https://support.syncfusion.com/ "Syncfusion support portal"), or [feedback portal](https://www.syncfusion.com/feedback/ "Syncfusion Feedback Portal"). We are always happy to assist you!

## Related blogs

- [Exploring the Blazor Signature Pad Component](https://dev.to/syncfusion/exploring-the-blazor-signature-pad-component-2fbk "Blog: Exploring the Blazor Signature Pad Component")