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

Carousel Events

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


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"
                 Width="400px" Height="200px">
        <div class="carousel-item">ID @(context.ID) : @(context.Text)</div>

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

@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; }

See Also

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