[Bug]: CarouselSlide error

[TobiasWiSoftware]

Blazorise Version

1.6.0

What Blazorise provider are you running on?

Bootstrap5

Link to minimal reproduction or a simple code snippet

@foreach (SectionComponentProjectDto item in SectionComponentItem.SectionComponentProjects)
{
    <div class="col-xl-6 mt-3" data-aos="fade-up" data-aos-delay="100">
        <div class="box pb-3">
            <div class="slider">
                <Carousel @bind-SelectedSlide="@selectedSlide" Autoplay="false" class="mt-5">
                    @if (item.SliderImagesBase64Data != null && item.SliderImagesBase64Data.Count > 0)
                    {
                        @for (int i = 0; i < item.SliderImagesBase64Data.Count; i++)
                        {
                            @(test = item.SliderImagesBase64Data[i])
                            <CarouselSlide Name="@i.ToString()" Height="Height.Is100" class="carousel-slide">
                                <a href="@item.SliderImagesBase64Data[i]">
                                    <Image Source="@item.SliderImagesBase64Data[i]" Display="Display.InlineBlock" Width="Width.Is75" />
                                </a>
                            </CarouselSlide>
                            <p>This is a @i with @item.SliderImagesBase64Data[i] and @test</p>
                        }
                    }
                </Carousel>
                <h3 class="mt-3">@item.Title</h3>
                <p>
                    @(new MarkupString(item.Description))
                </p>
            </div>
        </div>
    </div>
}

### Steps to reproduce

Just running code in blazor

### What is expected?

Creating a image slider based on the string list SliderImagesBase64Data which contains path to the pictures in wwwroot folder.

### What is actually happening?

Throws an out of range exception when using Source="@item.SliderImagesBase64Data[i]", but in this <p>This is a @i with @item.SliderImagesBase64Data[i] and @test</p> it logs the right data so its only throwing that error inside the CarouselSlider. When changed to Source="@item.SliderImagesBase64Data[0]" it works, when change to Source="@item.SliderImagesBase64Data[1]" it does not work and when changed to Source="test", it throws no error but is only displaying the last of the 2 Pictures in every string list

### What browsers do you see the problem on?

Firefox

### Any additional comments?

In my optinion it is not a problem of the list, it only happens in CarouselSlider tag, but in hardcode with Source="@item.SliderImagesBase64Data[0]" and Source="@item.SliderImagesBase64Data[1]" it works. Without the "" or with @(item.SliderImagesBase64Data[i]) it is also not working. 

[stsrki]

I have tried to recreate your repro as close as possible.

<Row>
    <Column>
        <Card Margin="Margin.Is4.OnY">
            <CardBody>
                @foreach ( SectionComponentProjectDto item in SectionComponentProjects )
                {
                    var test = "";
                    <div @key="@item" class="col-xl-6 mt-3" data-aos="fade-up" data-aos-delay="100">
                        <div class="box pb-3">
                            <div class="slider">
                                <Carousel @bind-SelectedSlide="@selectedSlide" Autoplay="false">
                                    @if ( item.SliderImagesBase64Data != null && item.SliderImagesBase64Data.Count > 0 )
                                    {
                                        @for ( int i = 0; i < item.SliderImagesBase64Data.Count; i++ )
                                        {
                                            var index = i;
                                            var name = index.ToString();
                                            @(test = item.SliderImagesBase64Data[index])
                                            <CarouselSlide @key="@index" Name="@name" Height="Height.Is100">
                                                <a href="@item.SliderImagesBase64Data[index]">
                                                    <Image Source="@item.SliderImagesBase64Data[index]" Display="Display.InlineBlock" Width="Width.Is75" />
                                                </a>
                                            </CarouselSlide>
                                            <p>This is a @index with @item.SliderImagesBase64Data[index] and @test</p>
                                        }
                                    }
                                </Carousel>
                                <h3 class="mt-3">@item.Title</h3>
                                <p>
                                    @(new MarkupString( item.Description ))
                                </p>
                            </div>
                        </div>
                    </div>
                }
            </CardBody>
        </Card>
    </Column>
</Row>
@code {
    class SectionComponentProjectDto
    {
        public string Title { get; set; }
        public string Description { get; set; }
        public List<string> SliderImagesBase64Data { get; set; }
    }

    List<SectionComponentProjectDto> SectionComponentProjects = new List<SectionComponentProjectDto>
    {
        new() { Title="T1", Description = "D1", SliderImagesBase64Data = new List<string>{ "_content/Blazorise.Demo/img/slides/slide-01.jpg", "_content/Blazorise.Demo/img/slides/slide-02.jpg", "_content/Blazorise.Demo/img/slides/slide-03.jpg" } },
        new() { Title="T2", Description = "D2", SliderImagesBase64Data = new List<string>{ "_content/Blazorise.Demo/img/slides/slide-01.jpg", "_content/Blazorise.Demo/img/slides/slide-02.jpg", "_content/Blazorise.Demo/img/slides/slide-03.jpg" } },
        new() { Title="T3", Description = "D3", SliderImagesBase64Data = new List<string>{ "_content/Blazorise.Demo/img/slides/slide-01.jpg", "_content/Blazorise.Demo/img/slides/slide-02.jpg", "_content/Blazorise.Demo/img/slides/slide-03.jpg" } },
    };
    string selectedSlide = "0";
}

The problem occurs because of an infamous Blazor's behavior with for loops. See https://www.reddit.com/r/csharp/comments/13k9hjq/a_very_bizzare_blazor_c_error_about_index_out_of/

Basically, the solution is to save i into a variable and use it to access an array by index.

[stsrki]

Hello @TobiasWiSoftware. Did you manage to fix the problem with our tips?

[TobiasWiSoftware]

Yes @stsrki the issue is fixed but I have another question. I have two photos at the moment, and when I first klick to switch from Picture1 to Picture2 it takes a pretty long time, about 1 sec. to react. Also then Picture 2 slides in from left to right instead from right to left as in documentation. When using three Pictures it works as in the documentation but also with about one second delay.

[stsrki]

We might need to fix it by canceling the internal timer when the button is clicked to slide the image immediately.

@David-Moreira can you look into it?

[David-Moreira]

It seems to be working fine to me.

There's always a little bit of delay because of the animation. If we'd cancel mid animation it would most likely be jarring.

[github-actions[bot]]

Hello @TobiasWiSoftware, thank you for your submission. The issue was labeled "Status: Repro Missing", as you have not provided a way to reproduce the issue quickly. Most problems already solve themselves when isolated, but we would like you to provide us with a reproducible code to make it easier to investigate a possible bug.

[TobiasWiSoftware]

@David-Moreira The issue happens only with two pictures can u try it again.

[David-Moreira]

@TobiasWiSoftware Maybe I'm missunderstanding I still don't see an issue:

Can you provide a github repo reproducing your issue?

[github-actions[bot]]

This is an automated message reminding that this issue is expecting the author's answer.