Live Chat Icon For mobile
Live Chat Icon
Popular Categories.NET  (157).NET Core  (28).NET MAUI  (36)Angular  (65)ASP.NET  (48)ASP.NET Core  (74)ASP.NET MVC  (88)Azure  (31)Blazor  (134)DocIO  (22)Essential JS 2  (76)Essential Studio  (169)File Formats  (25)Flutter  (121)JavaScript  (167)Microsoft  (109)PDF  (64)React  (48)Succinctly series  (126)Syncfusion  (552)TypeScript  (30)Uno Platform  (3)UWP  (4)Vue  (34)Webinar  (30)Windows Forms  (57)WinUI  (40)WPF  (131)Xamarin  (148)XlsIO  (25)Other CategoriesBarcode  (5)BI  (29)Bold BI  (4)Build conference  (6)Business intelligence  (53)Button  (4)C#  (115)Chart  (56)Cloud  (11)Company  (445)Dashboard  (7)Data Science  (3)Data Validation  (6)DataGrid  (53)Development  (335)Doc  (7)DockingManager  (1)eBook  (95)Enterprise  (22)Entity Framework  (5)Essential Tools  (14)Excel  (22)Extensions  (17)File Manager  (4)Gantt  (11)Gauge  (9)Git  (4)Grid  (27)HTML  (9)Installer  (2)Knockout  (2)Language  (1)LINQPad  (1)Linux  (2)M-Commerce  (1)Metro Studio  (11)Mobile  (277)Mobile MVC  (9)OLAP server  (1)Open source  (1)Orubase  (12)Partners  (21)PDF viewer  (28)Performance  (9)PHP  (1)PivotGrid  (4)Predictive Analytics  (6)Report Server  (3)Reporting  (10)Reporting / Back Office  (11)Rich Text Editor  (7)Road Map  (10)Scheduler  (34)SfDataGrid  (9)Silverlight  (21)Sneak Peek  (21)Solution Services  (2)Spreadsheet  (11)SQL  (8)Stock Chart  (1)Surface  (4)Tablets  (5)Theme  (11)Tips and Tricks  (88)UI  (190)Uncategorized  (68)Unix  (2)User interface  (68)Visual State Manager  (1)Visual Studio  (23)Visual Studio Code  (14)Web  (304)What's new  (179)Windows 8  (19)Windows App  (2)Windows Phone  (15)Windows Phone 7  (9)WinRT  (26)
Share on twitter
Share on facebook
Share on linkedin
Introducing the New Blazor Carousel Component

Introducing the New Blazor Carousel Component

We are happy to introduce the new Carousel component to the Blazor suite in our 2022 Volume 1 release. The Blazor Carousel component has been one of the most anticipated and upvoted components in our 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:

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.

<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
Creating Slides in Blazor Carousel Component

The Previous and Next navigation buttons are used to perform slide transitions manually. You can show or hide them using the ButtonsVisibility 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 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.

<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 property is used to show or hide the play button in the user interface. You can also customize the play button using the template option.

Refer to the following image.

Play/Pause Button in Blazor Carousel Component
Play/Pause Button in Blazor Carousel Component

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 property, and show a preview of a slide or thumbnail in the indicators by using the IndicatorsTemplate property.

Refer to the following image.

Indicators in Blazor Carousel Component
Indicators in Blazor Carousel Component

Note: For more details on previewing slides, check out the template examples in the Blazor Carousel component.

Animation and transitions

You can smoothly navigate among the slides with the built-in slide and cross-fade animation 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 property.

WAI-ARIA compliance and keyboard accessibility

We have designed the Carousel component based on WAI-ARIA 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:

KeyFunctionality
Arrow keysNavigate between slides.
HomeNavigate to the first slide.
EndNavigate to the last slide.
SpacePlay or pause the slide transitions.
EnterPerform the action in focus.

References

For more details, refer to our Getting Started with Blazor Carousel Component documentation and demos.

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 component which rolled out in the 2022 Volume 1 release. Try out this great control and provide your feedback in the comments section below. Also, check out our Release Notes and What’s New pages to see all the new updates in this release.

The Carousel component is also available in our AngularReactVueJavaScript, ASP.NET (Core and MVC), WinForms, WPF, Xamarin, and UWP platforms. Try it out in your platform of choice and enjoy hassle-free slide navigation!

As always, you can contact us through our support forumssupport portal, or feedback portal. We are always happy to assist you!

Related blogs

Tags:

Share this post:

Share on twitter
Share on facebook
Share on linkedin
Popular Now

Be the first to get updates

Subscribe RSS feed
Scroll To Top