Carousel Template

The Carousel template defines the markup to be rendered by the component. If a template is not set, the Carousel will not display anything.

The nested <Template> tag of the <TelerikCarousel> represents a standard RenderFragment.

The template exposes a context parameter, which allows access to the Carousel model and its properties. The context variable can assume a custom name, which is needed for nesting templates of different components.

@* Blazor Carousel - template context usage *@

<TelerikCarousel Data="@CarouselData"
                 Width="400px" Height="200px">
    <Template Context="carouselContext">
        <div class="item">@carouselContext.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.

See Also

• Carousel Events
• Carousel Live Demo