@using MissnationBlazorWASM.Shared

<section class="slider-revolution-wrapper">
    <div class="tp-banner-container">
        <div class="tp-banner">
            <ul>
                <!-- slide 1 start -->
                @{
                    foreach (var SliderItem in Sliders)
                    {
                        <li class="" data-transition="fade" data-slotamount="7" data-masterspeed="500" data-saveperformance="on" data-title="Natural">

                            <img class="filtered" src="@SliderItem.Url" alt="" data-bgposition="center top" data-bgfit="cover" data-bgrepeat="no-repeat">

                            <!-- LAYER NR. 1 -->
                            <div class="tp-caption rev-heading lft start text-white" data-x="center" data-y="150" data-speed="500" data-start="1900" data-easing="Back.easeOut" data-splitin="" data-splitout="" data-elementdelay="0.1" data-endelementdelay="0.1">@SliderItem.Title</div>

                            <!-- LAYER NR. 2 -->
                            <div class="tp-caption rev-subheading sfb" data-x="center" data-y="250" data-speed="300" data-start="2500" data-easing="Back.easeOut" data-splitin="" data-splitout="" data-elementdelay="0.1" data-endelementdelay="0.1">
                                <div style="width:50vw;">
                                    <p class="text-white" style="text-wrap: wrap;">
                                        @SliderItem.Description
                                    </p>
                                </div>


                            </div>


                        </li>
                    }
                }

                
            </ul>
            <div class="tp-bannertimer"></div>
        </div>
    </div>
</section>

@code {
    List<SliderItem> Sliders = new List<SliderItem>
    {
        new SliderItem("Natural Beauty", "We believe that natural Beauty is a value of great importance.", "_content/MissNationSharedUI/assets/img/04.jpg"),
        new SliderItem("#stayU", "Miss Nation's mission is to integrate the message of #stayU campaign in the education systems of all nations.", "_content/MissNationSharedUI/assets/img/05.jpg"),
        new SliderItem("Natural", "The campaign adresses young girls to avoid comparing themselves with others, and to stop using plastic surgery to alter their appearance.", "_content/MissNationSharedUI/assets/img/06.jpg")
       
    };

    protected override void OnInitialized()
    {
        base.OnInitialized();
    }

}