Cannot add HxCarouselItem by a loop

[alpachinois]

Is it possible to create a carousel dynamically? The following loop is always executed before the creation of HxCarouselItem items. So i is always == managerQuestions.Count - 1 and the @if (i % 2 == 0) doesn't work.

<HxCarousel @ref="carousel" Ride="CarouselRide.False" Controls="false"> 
    @for (int i = 0; i < managerQuestions.Count; i++) 
    { 
        string key = @managerQuestions.Keys.ElementAt(i); 
        (string FirstAnswer, string SecondAnswer) value = @managerQuestions[key]; 
        <HxCarouselItem Active="@(i == 0)"> 
            @if (i % 2 == 0) 
            { 
                <div class="card"> 
                    <HxCard ImageAlt="Grey area" 
                            ImageSrc="https://images.unsplash.com/photo-1433588641602-7c1083c4f0e2" 
                            ImageHeight="350" 
                            style="width: 36rem;"> 
                        <BodyTemplate> 
                            <HxCardText>@key</HxCardText> 
                        </BodyTemplate> 
                        <FooterTemplate> 
                            @if (i + 1 == managerQuestions.Count) 
                            { 
                                <div class="card-button-container"> 
                                    <button class="hx-button btn primary-button w-button equal-button" @onclick="async () => await CloseModalAsync()">@value.FirstAnswer</button> 
                                    <button class="hx-button btn primary-button w-button equal-button" @onclick="async () => await CloseModalAsync()">@value.SecondAnswer</button> 
                                </div> 
                            } 
                            else 
                            { 
                                <div class="card-button-container"> 
                                    <button class="hx-button btn primary-button w-button equal-button" @onclick="async () => await HandleClickAsync()">@value.FirstAnswer</button> 
                                    <button class="hx-button btn primary-button w-button equal-button" @onclick="async () => await HandleClickAsync()">@value.SecondAnswer</button> 
                                </div> 
                            } 
                        </FooterTemplate> 
                    </HxCard> 
                </div> 
            } 
            else 
            { 
                <HxCard style="width: 36rem;"> 
                    <BodyTemplate> 
                        <p class="mt-2">Selected employee ID: @SelectedOption</p> 
 
                        <div class="wrapper" role="radiogroup" aria-labelledby="bulgy-radios-label"> 
                            <label> 
                                <input type="radio" 
                                       name="options" 
                                       value="@value.FirstAnswer" 
                                       @onchange="OnOptionChange" 
                                       checked="@((SelectedOption == @value.FirstAnswer))" /> 
                                <span class="radio"></span> 
                                <span class="label">@value.FirstAnswer</span> 
                            </label> 
                            <label> 
                                <input type="radio" 
                                       name="options" 
                                       value="@value.SecondAnswer" 
                                       @onchange="OnOptionChange" 
                                       checked="@((SelectedOption == @value.SecondAnswer))" /> 
                                <span class="radio"></span> 
                                <span class="label">@value.SecondAnswer</span> 
                            </label> 
                        </div> 
                    </BodyTemplate> 
                    <FooterTemplate> 
                        <div class="button-container"> 
                            @if (i + 1 == managerQuestions.Count) 
                            { 
                                <button @onclick="() => carousel.SlideToNextItemAsync()" class="hx-button btn primary-button w-button" style="margin: 10px;" disabled="@(SelectedOption is null)">Suivant</button> 
                            } 
                            else 
                            { 
                                <button @onclick="async () => await CloseModalAsync()" class="hx-button btn primary-button w-button" style="margin: 10px;" disabled="@(SelectedOption is null)">Terminer</button> 
                            } 
                        </div> 
                    </FooterTemplate> 
                </HxCard> 
            } 
        </HxCarouselItem> 
    } 
</HxCarousel>

[hakenr]

I don't think this is about the HxCarousel[Item]. You can't use the loop variable i directly in lambda expressions or nested RenderFragments. Try adding var index = i; as the first line inside the for loop, and then use index variable instead of i everywhere (for example, if (index % 2 == 0)).

[alpachinois]

I don't think this is about the HxCarousel[Item]. You can't use the loop variable i directly in lambda expressions or nested RenderFragments. Try adding var index = i; as the first line inside the for loop, and then use index variable instead of i everywhere (for example, if (index % 2 == 0)).

Thank you that works.