<TelerikButton OnClick="AddNewItem">Add New Item</TelerikButton>

<TelerikCarousel @ref="@CarouselRef" Class="@(isScrollable ? "" : "my-carousel")" Data="@CarouselData"
                 Page="@PageIndex"
                 PageChanged="@PageChangedHandler"
                 Width="400px" Height="200px" AutomaticPageChange="false">
    <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;
    }

    .my-carousel .k-scrollview-wrap.k-scrollview-animate {
        transition-duration: 0s;
    }
</style>

@code {
    private TelerikCarousel<CarouselModel> CarouselRef;
    public bool isScrollable { get; set; } = true;

    public int PageIndex = 1;
    public async Task PageChangedHandler(int newPage)
    {
        if (PageIndex == CarouselData.First().ID && newPage == CarouselData.Last().ID || PageIndex == CarouselData.Last().ID && newPage == CarouselData.First().ID)
        {
            isScrollable = false;
        }
        else
        {
            isScrollable = true;
        }
        PageIndex = newPage;
    }

    void AddNewItem()
    {
        CarouselData.Add(new CarouselModel() { ID = CarouselData.Count() + 1, Text = "Text " + (CarouselData.Count() + 1) });

        isScrollable = false;

        CarouselRef.Rebind();
    }

    public List<CarouselModel> CarouselData = new List<CarouselModel>()
    {
        new CarouselModel
        {
            ID = 1,
            Text = "Text " + 1
        },
        new CarouselModel
        {
            ID = 2,
            Text = "Text " + 2
        },
        new CarouselModel
        {
            ID = 3,
            Text = "Text " + 3
        }
    };

    public class CarouselModel
    {
        public int ID { get; set; }
        public string Text { get; set; }
    }
}