Carousel does not transition with dynamic data

[Daniel Tujo]

Created a Carousel with images retrieved from a service. When loading the page the first image shows but does not automatically transition, as well as the buttons do not work. I have tried using a regular for loop as well as this foreach.

@using SFTownCenter.Entities
@using SFTownCenter.Services.Interfaces
@inject IImageLinksService imageLinkService


    <SfCarousel AnimationEffect="CarouselAnimationEffect.Fade">
        @foreach(var image in ImageList)
        {            
            @if (image.Enabled == true)
            {
                var base64Data = Convert.ToBase64String(image.image);
                var imgDataUrl = string.Format($"data:image/{image.ImageType};base64, {{0}}", base64Data);
                
                <CarouselItem>
                    <figure class="img-container">
                        <img src="@imgDataUrl" style="height: 100%;width: 100%" alt="@image.ImageTitle"/>
                    </figure>
                </CarouselItem>
            }
        }
    </SfCarousel>


@code {
    private List<ImageLinkDto> ImageList { get; set; } = [];


    protected override async Task OnInitializedAsync()
    {
        ImageList = await imageLinkService.GetAllImageLinkDTOs();
        StateHasChanged();
    }
}

[Ram Raju Elaiyaperumal]

Hi Daniel Tujo,

Based on your query we found that you are rendering carousel content through service and the carousel automatically transition and navigation buttons are also not working, we prepared sample and service to replicate the issue, but we are unable to replicate the issue, the carousel is working as expected.

For your reference we are sharing the prepared sample and service kindly check on the attachment

It would be helpful if you could provide more details about your setup or a simple sample that replicates the issue. Alternatively, you could try to replicate the issue in the provided sample and let us know the steps you took. This will help us in identifying the root cause of the problem and provide you with a more accurate solution.

Regards,

Ram

Attachment: SimpleCarousel_b79ade64.zip