DxCarousel.SlideNextAsync() Method

Navigates to the next Carousel item.

Assembly : DevExpress.Blazor.v25.2.dll

Declaration

csharp

public Task SlideNextAsync()

Returns

Type	Description
Task

The task that is completed when the next Carousel item is activated.

Remarks

Call the SlideNextAsync method to navigate to the next Carousel item in code. In case of the last item in the gallery, the method behavior depends on the LoopNavigationEnabled property value. If this property is set to true, the SlideNextAsync method navigates to the first item in the gallery. If false – the method does nothing.

Example

The following code snippet navigates between Carousel items on custom button clicks:

Razor
DataSource

razor

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

<DxButton IconCssClass="oi oi-arrow-left" Click="OnPreviousButtonClick" />
<DxButton IconCssClass="oi oi-arrow-right" Click="OnNextButtonClick" />

@code {
    DxCarousel carousel;

    async Task OnNextButtonClick(MouseEventArgs args) {
        await carousel.SlideNextAsync();
    }

    async Task OnPreviousButtonClick(MouseEventArgs args) {
        await carousel.SlidePreviousAsync();
    }
}

csharp

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