MissnationBlazor/MissNationSharedUI/Shared/Components/Layout/SlidersComponent.razor

56 lines
2.4 KiB
Plaintext

@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();
}
}