如何在 blazor 中制作图像轮播?

你好社区我想用 carousel 制作一个 blazor webassembly 的图像,我找到了一个帮助我创建一个 carrsuel 来传递 components.razor 的例子,但我想重写代码,以便它显示图像,或者是否可以将其设置为通用以接收 both images and components

这是我的代码:

carousel.razor

@using System.Threading

<div class="d-flex flex-column" style="background-color: rgba(10,10,.8);">
    <div class="d-flex justify-content-between align-items-center" style="height: 400px;">
        <button type="button" class="btn btn-sm btn-outline-light" @onclick="() => Manualy(true)">
            <i class="fas fa-chevron-left"></i>
        </button>
        <div>
            @Render(currentPosition)
        </div>        
        <button type="button" class="btn btn-sm btn-outline-light" @onclick="() => Manualy(false)">
            <i class="fas fa-chevron-right"></i>
        </button>
    </div>
    <div class="d-flex justify-content-center">
        @foreach (var item in Components)
        {
            if (Math.Abs(currentPosition % Components.Length) == Array.IndexOf(Components,item))
            {
                <div class="alert alert-info border-dark"></div>
            }
            else
            {
                <div class="alert alert-light border-dark"></div>
            }
        }
    </div>
</div>

@code {
    public void Manualy(bool backwards)
    {
        if (!cts.IsCancellationRequested)
            cts.Cancel();
        if (backwards)
            currentPosition--;
        else
            currentPosition++;
    }

    [Parameter] public Type[] Components { get; set; }
    int currentPosition;
    CancellationTokenSource cts;
    CancellationToken ct;

    protected override async Task OnInitializedAsync()
    {
        cts = new CancellationTokenSource();
        ct = cts.Token;
        Walkthrough();
    }

    public async Task Walkthrough()
    {
        while (!ct.IsCancellationRequested)
        {
            await Task.Delay(2500,ct);
            currentPosition++;
            await InvokeAsync(() => this.StateHasChanged());
        }
    }

    public RenderFragment Render(int position)
    {
        return RenderTreeBuilder =>
        {
            RenderTreeBuilder.OpenComponent(0,Components[Math.Abs(position % Components.Length)]);
            RenderTreeBuilder.CloseComponent();
        };
    }
}

index.razor

<CarruselComponent Components="types"></CarruselComponent>

@code {
    Type[] types =
    {
        typeof(Cajas),typeof(Bancos),typeof(Almacen)
    };
}
lihonglian26 回答:如何在 blazor 中制作图像轮播?

暂时没有好的解决方案,如果你有好的解决方案,请发邮件至:iooj@foxmail.com
本文链接:https://www.f2er.com/26369.html

大家都在问