80 lines
2.2 KiB
Plaintext
80 lines
2.2 KiB
Plaintext
@using BlazorAnimation
|
|
@using TIAMWebApp.Shared.Application.Models.ClientSide.UI
|
|
<header style="padding-bottom: @PBottom;" class="bg-light">
|
|
|
|
<div id="owl-demo" class="owl-carousel owl-theme" style="/* position:absolute; */ z-index: 1;">
|
|
|
|
@{
|
|
foreach (var slider in SliderItems)
|
|
{
|
|
<div class="item d-flex align-items-center" style="height: @Height; background-image : url('@slider.ImageUrl'); background-size:cover; background-position:center; background-color: rgba(0, 0, 0, 0.6); background-blend-mode: overlay;">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-6 col-sm-12 text-white">
|
|
<h1>@slider.Title</h1>
|
|
<p>@slider.Subtitle</p>
|
|
<a href="@slider.ButtonUrl" class="btn btn-primary">@slider.ButtonText</a>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
}
|
|
}
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</header>
|
|
|
|
|
|
|
|
<script>
|
|
$(document).ready(function () {
|
|
|
|
$("#owl-demo").owlCarousel({
|
|
|
|
navigation: true, // Show next and prev buttons
|
|
autoplay: true,
|
|
loop: true,
|
|
autoplayTimeout: 5000,
|
|
slideSpeed: 100,
|
|
paginationSpeed: 200,
|
|
|
|
items: 1,
|
|
itemsDesktop: false,
|
|
itemsDesktopSmall: false,
|
|
itemsTablet: false,
|
|
itemsMobile: false,
|
|
/*responsive: {
|
|
0: {
|
|
items: 1,
|
|
},
|
|
600: {
|
|
items: 1,
|
|
},
|
|
1000: {
|
|
items: 2,
|
|
}
|
|
},*/
|
|
animateOut: 'fadeOut',
|
|
animateIn: 'flipInX',
|
|
|
|
});
|
|
|
|
});
|
|
</script>
|
|
|
|
@code {
|
|
[Parameter]
|
|
public List<HeroSliderItem> SliderItems { get; set; }
|
|
|
|
[Parameter]
|
|
public string PBottom { get; set; } = "50px";
|
|
|
|
[Parameter]
|
|
public string Height { get; set; } = "50vh";
|
|
}
|