DxCarouselItem Class

Defines a Carousel item.

Assembly: DevExpress.Blazor.v24.2.dll

Declaration

public class DxCarouselItem :
    ComponentBase,
    IDisposable

Remarks

The DxCarouselItem class implements the functionality of an individual item displayed in a DxCarousel component. Use the Items property to manage the component’s item collection.

Run Demo

A DxCarouselItem can display any UI element or custom content. Specify the markup directly in the <DxCarouselItem> tag:

Carousel - Item Collection

<DxCarousel Width="500px"
            Height="300px">
    <Items>
        @foreach (var item in GetCarouselData()) {
            <DxCarouselItem>
                <div class="caruselItemContainer">
                    <p class="caruselItemCaption">@item.AlternateText</p>
                    <img src=@item.Source
                         alt=@item.AlternateText />
                </div>
            </DxCarouselItem>
        }
    </Items>
</DxCarousel>

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 Source { get; set; }
    public string AlternateText { get; set; }

    public CarouselData(string source, string alt) {
        Source = source;
        AlternateText = alt;
    }
}

.caruselItemContainer {
    width: 100%;
    height: 100%;
    position: relative;
}

.caruselItemCaption {
    position: absolute;
    top: 2rem;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 2rem;
    font-weight: 700;
}