82 lines
2.1 KiB
Plaintext
82 lines
2.1 KiB
Plaintext
@inject IJSRuntime JS
|
||
|
||
@* Hidden div to ensure Tailwind JIT generates classes used in carousal.js *@
|
||
<div
|
||
class="hidden scale-100 scale-125 duration-[4000ms] transition-all transition ease-in-out text-accent lg:text-5xl md:text-4xl">
|
||
</div>
|
||
|
||
<div class="relative overflow-hidden w-full h-full bg-black">
|
||
<img id="mainImage" src="" class="absolute inset-0 w-full h-full object-cover" />
|
||
|
||
<div class="absolute inset-0 flex items-center justify-center bg-black/20">
|
||
<div class="ml14 text-center">
|
||
<span class="text-wrapper relative inline-block p-4">
|
||
<span class="line absolute bottom-0 left-0 w-full h-1 bg-accent origin-left"></span>
|
||
<span id="mainText"
|
||
class="letters block overflow-hidden lg:text-5xl md:text-4xl text-3xl font-bold text-white"></span>
|
||
</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="absolute inset-x-0 top-1/2 -translate-y-1/2 flex justify-between px-5 pointer-events-none">
|
||
<button id="prev" class="btn btn-circle btn-ghost bg-black/20 text-white pointer-events-auto">❮</button>
|
||
<button id="next" class="btn btn-circle btn-ghost bg-black/20 text-white pointer-events-auto">❯</button>
|
||
</div>
|
||
</div>
|
||
|
||
<style>
|
||
.ml14 .text-wrapper {
|
||
position: relative;
|
||
display: inline-block;
|
||
}
|
||
|
||
.ml14 .line {
|
||
position: absolute;
|
||
left: 0;
|
||
bottom: 0;
|
||
width: 100%;
|
||
height: 3px;
|
||
}
|
||
|
||
.ml14 .letter {
|
||
display: inline-block;
|
||
line-height: 1em;
|
||
}
|
||
</style>
|
||
|
||
@code {
|
||
|
||
[Parameter]
|
||
public List<(string Text, string ImageUrl)>? Data { get; set; }
|
||
|
||
[Parameter]
|
||
public List<string>? Images { get; set; }
|
||
|
||
protected override async Task OnAfterRenderAsync(bool firstRender)
|
||
{
|
||
if (firstRender)
|
||
{
|
||
var dataToPass = new List<string[]>();
|
||
|
||
if (Data != null && Data.Any())
|
||
{
|
||
foreach (var item in Data)
|
||
{
|
||
dataToPass.Add(new[] { item.Text, item.ImageUrl });
|
||
}
|
||
}
|
||
else if (Images != null && Images.Any())
|
||
{
|
||
foreach (var img in Images)
|
||
{
|
||
dataToPass.Add(new[] { "", img });
|
||
}
|
||
}
|
||
|
||
if (dataToPass.Any())
|
||
{
|
||
await JS.InvokeVoidAsync("animate", dataToPass);
|
||
}
|
||
}
|
||
}
|
||
} |