Carousel Events

This article describes the available events of the Telerik Carousel for Blazor.

• PageChanged

PageChanged

The PageChanged event fires when:

• the user clicks on the left or right navigation arrow;
• the user clicks on a pager dot;
• the Carousel navigates to the next page automatically;

The event can be used to implement custom business logic, or update the Carousel Page attribute value, when using one-way binding for it.

@* Handle the Carousel PageChanged event *@

<p>Page changed to index: @PageIndex</p>

<TelerikCarousel Data="@CarouselData"
                 PageChanged="@PageChangedHandler"
                 Page="@PageIndex"
                 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 int PageIndex = 1;
    public async Task PageChangedHandler(int newPage)
    {
        PageIndex = newPage;
    }

    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 Overview