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 85+ native components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.

In this article:

Basics

To use a Telerik Carousel for Blazor:

  1. Add the TelerikCarousel tag.
  2. Set the Data attribute to the variable that holds the component data.
  3. Add a nested <Template> tag that will define the HTML content to display.
  4. Set Width and Height attributes of the Carousel, according to the content to display.

Example

Here is a simple Carousel that has 5 pages with some styled text.

@* 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 snippet will produce the following result:

Carousel component

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.

Features

The Carousel provides the following features:

  • Arrows - bool - shows or hides the overlay arrow buttons that navigate the Carousel pages (true by default).
  • LoopPages - bool - enables the Carousel to switch to the first page, when the last one is reached (true by default).
  • Pageable - bool - shows or hides the overlay pager (true by default). 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 - defines the 1-based index of content item to display (1 by default). Supports two-way binding.
  • AutomaticPageChange - bool - allows the Carousel to switch the next page automatically after a short delay (true by default).
  • AutomaticPageChangeInterval - int - defines the automatic page change delay in milliseconds (5000 by default).
  • Width - string - sets the Carousel width as a CSS string. See Dimensions for more details. The Carousel renders in a <div>, so it expands horizontally to 100% by default.
  • Height - string - sets the Carousel height as a CSS string. 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 a height is not applied.
  • Template for the Carousel content
  • Class - string - sets a custom CSS class to the component. To customize the appearance of all Carousels, you can also use its default CSS class k-scrollview.

You can use Class to set the Carousel dimensions, instead of Width and Height.

See Also

In this article
Not finding the help you need? Improve this article