New to Telerik UI for Blazor? Download free 30-day trial

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="carousel-item">@carouselContext.Text</div>
    </Template>
</TelerikCarousel>

<style>
    .carousel-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; }
    }
}

See Also

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