73 lines
3.9 KiB
Plaintext
73 lines
3.9 KiB
Plaintext
@using BlazorAnimation
|
|
<header class="pb-5">
|
|
<Animation Effect="@Effect.FadeIn" Speed="@Speed.Fast" Delay="@TimeSpan.FromMilliseconds(250)">
|
|
<div id="owl-demo" class="owl-carousel owl-theme">
|
|
|
|
<div class="item d-flex align-items-center"><img src="https://images.unsplash.com/photo-1551867633-194f125bddfa?auto=format&fit=crop&q=80&w=2070&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" class="my-auto" alt="The Last of us"></div>
|
|
<div class="item d-flex align-items-center"><img src="https://images.unsplash.com/photo-1549877452-9c387954fbc2?auto=format&fit=crop&q=80&w=2070&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" class="my-auto" alt="GTA V"></div>
|
|
<div class="item d-flex align-items-center"><img src="https://images.unsplash.com/photo-1507622560124-621e26755fb8?auto=format&fit=crop&q=80&w=2070&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" class="my-auto" alt="Mirror Edge"></div>
|
|
|
|
</div>
|
|
</Animation>
|
|
<!--div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="carousel">
|
|
<div class="carousel-indicators">
|
|
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
|
|
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-label="Slide 2"></button>
|
|
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2" aria-label="Slide 3"></button>
|
|
</div>
|
|
<div class="carousel-inner">
|
|
<div class="carousel-item active" style="background-image: url('https://images.unsplash.com/photo-1551867633-194f125bddfa?auto=format&fit=crop&q=80&w=2070&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D')">
|
|
<div class="carousel-caption">
|
|
<h5>First slide label</h5>
|
|
<p>Some representative placeholder content for the first slide.</p>
|
|
</div>
|
|
</div>
|
|
<div class="carousel-item" style="background-image: url('https://images.unsplash.com/photo-1518471152222-d42e38ce6873?auto=format&fit=crop&q=80&w=1974&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D')">
|
|
<div class="carousel-caption">
|
|
<h5>Second slide label</h5>
|
|
<p>Some representative placeholder content for the second slide.</p>
|
|
</div>
|
|
</div>
|
|
<div class="carousel-item" style="background-image: url('https://images.unsplash.com/photo-1507622560124-621e26755fb8?auto=format&fit=crop&q=80&w=2070&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D')">
|
|
<div class="carousel-caption">
|
|
<h5>Third slide label</h5>
|
|
<p>Some representative placeholder content for the third slide.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="prev">
|
|
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
|
|
<span class="visually-hidden">Previous</span>
|
|
</button>
|
|
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="next">
|
|
<span class="carousel-control-next-icon" aria-hidden="true"></span>
|
|
<span class="visually-hidden">Next</span>
|
|
</button>
|
|
</div-->
|
|
</header>
|
|
|
|
<script>
|
|
$(document).ready(function () {
|
|
|
|
$("#owl-demo").owlCarousel({
|
|
|
|
navigation: true, // Show next and prev buttons
|
|
|
|
slideSpeed: 300,
|
|
paginationSpeed: 400,
|
|
|
|
items: 1,
|
|
itemsDesktop: false,
|
|
itemsDesktopSmall: false,
|
|
itemsTablet: false,
|
|
itemsMobile: false
|
|
|
|
});
|
|
|
|
});
|
|
</script>
|
|
|
|
@code {
|
|
|
|
}
|