Back to Devexpress

DxCarousel.ActiveItemIndexChanged Event

blazor-devexpress-dot-blazor-dot-dxcarousel-17c22dde.md

latest2.3 KB
Original Source

DxCarousel.ActiveItemIndexChanged Event

Fires when the Carousel’s active item index is changed.

Namespace : DevExpress.Blazor

Assembly : DevExpress.Blazor.v25.2.dll

NuGet Package : DevExpress.Blazor

Declaration

csharp
[Parameter]
public EventCallback<int> ActiveItemIndexChanged { get; set; }

Parameters

TypeDescription
Int32

The active item’s index.

|

Remarks

Use the ActiveItemIndex property to activate a particular Carousel item programmatically. Handle the ActiveItemIndexChanged event to respond to the property change.

razor
<DxCarousel Width="500px"
            Height="300px"
            Data="@GetCarouselData()"
            ActiveItemIndex="@CarouselItemIndex"
            LoopNavigationEnabled="true"
            ImageSizeMode="CarouselImageSizeMode.FillAndCrop"
            ActiveItemIndexChanged="OnActiveItemIndexChanged">
</DxCarousel>

<div>@ItemIndexInfo</div>
csharp
int CarouselItemIndex { get; set; } = 1;
string ItemIndexInfo { get; set; }

void OnActiveItemIndexChanged(int newItemIndex) {
    CarouselItemIndex = newItemIndex;
    ItemIndexInfo = "You switched to item " + (newItemIndex + 1);
}
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;
    }
}

See Also

DxCarousel Class

DxCarousel Members

DevExpress.Blazor Namespace