70 lines
1.6 KiB
Plaintext
70 lines
1.6 KiB
Plaintext
@using BlazorAnimation
|
|
@using TIAMWebApp.Shared.Application.Models.ClientSide.UI
|
|
<header style="padding-bottom: @PBottom;">
|
|
|
|
<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;">
|
|
<img src="@slider.ImageUrl" class="my-auto" alt="@slider.Title">
|
|
</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";
|
|
}
|