Blazor Carousel Overview

The Carousel for Blazor is an interactive component that allows users to browse a collection of content items (pages) one at a time. The Carousel template supports random web content, although it is most often used to display images.

Telerik UI for Blazor Ninja image

The Carousel component is part of Telerik UI for Blazor, a professional grade UI library with 100 native components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.

  1. Use the TelerikCarousel tag to add the component to your razor page.
  2. Populate the Data property with your collection of items.
  3. Use the nested <Template> tag to declare the HTML content that you want to display.
  4. Set Width and Height attributes of the Carousel, according to the content to display.

Carousel with 5 pages and some basic content

@* Blazor Carousel *@

<TelerikCarousel Data="@CarouselData"
                 Width="400px" Height="200px">
    <Template>
        <div class="item">ID @(context.ID) : @(context.Text)</div>
    </Template>
</TelerikCarousel>

<style>
    .item {
        background: #3d57d8;
        color: #fff;
        font: 36px/200px sans-serif;
        text-align: center;
    }
</style>

@code {
    public IEnumerable<CarouselModel> CarouselData = Enumerable.Range(1, 5).Select(x => new CarouselModel
    {
        ID = x,
        Text = "Text " + x
    });

    public class CarouselModel
    {
        public int ID { get; set; }
        public string Text { get; set; }
    }
}

The carousel-item class is used by Bootstrap which introduces some conflicts and might lead to undesired behavior if used in the Template. That said, you should avoid it when setting CSS class for the child element of the Carousel Template.

Template

To display any content in the Carousel, use a Template and place your desired markup inside. If a template is not set, the Carousel will not display anything.

Events

The Blazor Carousel generates events that you can handle and further customize its behavior. Read more about the Blazor Carousel events...

The following table lists Carousel parameters. Check the Carousel API Reference for a full list of properties, methods and events.

Parameter Type and Default Value Description
Arrows bool
(true)
Whether the navigation arrow buttons will be shown.
LoopPages bool
(true)
Whether the Carousel will switch to the first page, when the last one is reached.
Pageable bool
(true)
Whether the overlay pager will be visible. Each page is represented by a clickable dot. The current page is represented by a colored dot. If the dots cannot fit in the available horizontal space, the pager will be scrollable.
Page int
( 1 )
The 1-based index of content item to display. Supports two-way binding.
AutomaticPageChange bool
(true)
Whether the Carousel will automatically switch to the next page after a short delay.
AutomaticPageChangeInterval int
( 5000 )
The automatic page change delay in milliseconds.
Width string The Carousel width. See Dimensions for more details. The Carousel renders in a <div>, so it expands horizontally to 100% by default.
Height string The Carousel height. By default and by design, the component has no height and does not expand, based on its content. In other words, the Carousel will be zero pixels high, if height is not applied.
Class string The CSS class that will be rendered on the main wrapping element of the component. Use it to apply custom styles or override the theme.

To execute Carousel methods, obtain reference to the component instance via @ref.

The Carousel is a generic component. Its type depends on the type of its model and the type of its Value. In case you cannot provide either the Value or Data initially, you need to set the corresponding types to the TItem and TValue parameters.

The table below lists the Carousel methods. Also consult the Carousel API.

Method Description
Rebind Refreshes the component data.
<TelerikCarousel @ref="@CarouselRef" .../>

@code{
    private TelerikCarousel<MyModel> CarouselRef;
}

Next Steps

See Also

In this article