DxCarousel.ItemTemplate Property

Specifies a template for Carousel items.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.2.dll

NuGet Package: DevExpress.Blazor

Declaration

[Parameter]
public RenderFragment<CarouselTemplateContext> ItemTemplate { get; set; }

Property Value

Type	Description
RenderFragment<CarouselTemplateContext>	The item template.

Remarks

The <DxCarousel> component allows you to customize the layout and appearance of Carousel items. Use the ItemTemplate property to specify a common template for all items.

<DxCarousel Width="500px"
            Height="300px"
            Data="@GetCarouselData()"
            ImageSizeMode="CarouselImageSizeMode.FillAndCrop">
    <ItemTemplate>
        @{
            var item = context.DataItem as CarouselData;
        }
        <div class="caruselItemContainer">
            <p class="caruselItemCaption">@item?.AlternateText</p>
            <img src="item?.Source" alt="item?.AlternateText" />
        </div>
    </ItemTemplate>
</DxCarousel>

@code {
    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;
        }
    }
}