DxCarousel.SlideToItemAsync(Int32) Method

Navigates to the Carousel item with the specified index.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.2.dll

NuGet Package: DevExpress.Blazor

Declaration

public Task SlideToItemAsync(
    int index
)

Parameters

Name	Type	Description
index	Int32	The Carousel item index.

Returns

Type	Description
Task	The task that is completed when the specified Carousel item is activated.

Remarks

Call the SlideToItemAsync method to navigate to the Carousel item with the specified index programmatically.

The following code snippet navigates to the first item in the gallery on a custom button click:

Razor

<DxCarousel Width="500px"
            Height="300px"
            @ref="carousel"
            Data="@GetCarouselData()"
            LoopNavigationEnabled="true"
            ImageSizeMode="CarouselImageSizeMode.FillAndCrop">
</DxCarousel>

<DxButton Text="First Item" Click="MoveToFirst" />

@code {
    DxCarousel carousel;

    async Task MoveToFirst (MouseEventArgs args) {
        await carousel.SlideToItemAsync(0);
    }
}

DataSource

List<CarouselData> GetCarouselData() {
    List<CarouselData> result = new List<CarouselData>();
    result.Add(new CarouselData("../images/image1.jpg", "image 1"));
    result.Add(new CarouselData("../images/image2.jpg", "image 2"));
    result.Add(new CarouselData("../images/image3.jpg", "image 3"));
    result.Add(new CarouselData("../images/image4.jpg", "image 4"));

    return result;
}

public class CarouselData {
    public string Src { get; set; }
    public string Alt { get; set; }

    public CarouselData(string src, string alt) {
        Src = src;
        Alt = alt;
    }
}