blazor-devexpress-dot-blazor-dot-dxcarousel-17c22dde.md
Fires when the Carousel’s active item index is changed.
Namespace : DevExpress.Blazor
Assembly : DevExpress.Blazor.v25.2.dll
NuGet Package : DevExpress.Blazor
[Parameter]
public EventCallback<int> ActiveItemIndexChanged { get; set; }
| Type | Description |
|---|---|
| Int32 |
The active item’s index.
|
Use the ActiveItemIndex property to activate a particular Carousel item programmatically. Handle the ActiveItemIndexChanged event to respond to the property change.
<DxCarousel Width="500px"
Height="300px"
Data="@GetCarouselData()"
ActiveItemIndex="@CarouselItemIndex"
LoopNavigationEnabled="true"
ImageSizeMode="CarouselImageSizeMode.FillAndCrop"
ActiveItemIndexChanged="OnActiveItemIndexChanged">
</DxCarousel>
<div>@ItemIndexInfo</div>
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