DxCarousel.Items Property

Specifies the component’s item collection.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.2.dll

NuGet Package: DevExpress.Blazor

Declaration

[Parameter]
public RenderFragment Items { get; set; }

Property Value

Type	Description
RenderFragment	A collection of items (UI fragments).

Remarks

The <DxCarousel> component can operate in unbound mode. Populate the component’s <Items>...</Items> tag with DxCarouselItem objects to create a collection of items.

Run Demo

Razor

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

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

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

CSS

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

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