Blazor Webassembly中的无JavaScript引导旋转木马

我对Blazor不熟悉

我在.NET5的BlazorWebAssembly项目中创建了一个旋转木马。它不会自动滑动，其上一个和下一个按钮不工作

请建议如何在没有javascript的情况下解决此问题

下面是我的代码

<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">
        <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
        <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
        <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
    </ol>
    <div class="carousel-inner">
        <div class="carousel-item active">
            <img class="d-block w-100" src="/images/slide/slide-1.jpg" alt="First slide">
        </div>
        <div class="carousel-item">
            <img class="d-block w-100" src="/images/slide/slide-2.jpg" alt="Second slide">
        </div>
        <div class="carousel-item">
            <img class="d-block w-100" src="/images/slide/slide-3.jpg" alt="Third slide">
        </div>
    </div>
    <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
    </a>
    <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>
</div>

---

PS：我正在使用VS2019和.NET 5生成的默认项目模板，并且没有包含任何额外的javascript文件。

经过广泛的研究，现在我能够在blazor中自动滚动旋转木马，而无需使用javascript。我还使用了prev和next按钮，并添加了一项功能：当用户单击prev或next时，它会进入手动模式，并自动停止滚动。以下是我的解决方案：

@page "/"
@using System.Threading;

<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">
        <li data-target="#carouselExampleIndicators" data-slide-to="0" class="@firstSlideCss"></li>
        <li data-target="#carouselExampleIndicators" data-slide-to="1" class="@secondSlideCss"></li>
        <li data-target="#carouselExampleIndicators" data-slide-to="2" class="@thirdSlideCss"></li>
    </ol>
    <div class="carousel-inner">
        <div class="carousel-item @firstSlideCss">
            <img class="d-block w-100" src="/images/slide/slide-1.jpg" alt="First slide">
        </div>
        <div class="carousel-item @secondSlideCss">
            <img class="d-block w-100" src="/images/slide/slide-2.jpg" alt="Second slide">
        </div>
        <div class="carousel-item @thirdSlideCss">
            <img class="d-block w-100" src="/images/slide/slide-3.jpg" alt="Third slide">
        </div>
    </div>
    <a class="carousel-control-prev" href="" role="button" data-slide="prev" @onclick="()=>Manually(true)">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
    </a>
    <a class="carousel-control-next" href="" role="button" data-slide="next" @onclick="()=>Manually(false)">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>
</div>

@code{
    string firstSlideCss = "active";
    string secondSlideCss = "";
    string thirdSlideCss = "";

    int currentPosition = 0;
    int currentSlide = 0;

    CancellationTokenSource cts;
    CancellationToken ct;

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

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

    public void Manually(bool backwards)
    {
        cts.Cancel();

        if (backwards)
            currentPosition--;
        else
            currentPosition++;

        ChangeSlide();
    }

    private void ChangeSlide()
    {
        currentSlide = Math.Abs(currentPosition % 3);

        switch (currentSlide)
        {
            case 0:
                firstSlideCss = "active";
                secondSlideCss = "";
                thirdSlideCss = "";
                break;
            case 1:
                firstSlideCss = "";
                secondSlideCss = "active";
                thirdSlideCss = "";
                break;
            case 2:
                firstSlideCss = "";
                secondSlideCss = "";
                thirdSlideCss = "active";
                break;
            default:
                break;
        }
    }
}

@page/“
@使用系统线程；



@代码{
string firstSlideCss=“活动”；
字符串secondSlideCss=“”；
字符串thirdsidecss=“”；
int currentPosition=0；
int currentSlide=0；
取消源cts；
取消令牌ct；
受保护的重写异步任务OnInitializedAsync（）
{
cts=新的CancellationTokenSource（）；
ct=cts.Token；
等待演练（ct）；
}
公共异步任务演练（CancellationToken ct）
{
而（！ct.iscancellationrequest）
{
等待任务。延迟（2500，ct）；
currentPosition++；
改变幻灯片（）；
等待InvokeAsync（（）=>this.StateHasChanged（））；
}
}
手动公共作废（bool向后）
{
cts.Cancel（）；
如果（向后）
当前位置--；
其他的
currentPosition++；
改变幻灯片（）；
}
私有void changelide（）
{
currentSlide=Math.Abs（当前位置%3）；
开关（电流滑动）
{
案例0：
firstSlideCss=“活动”；
第二个slidecss=“”；
第三方CSS=“”；
打破
案例1：
firstSlideCss=“”；
secondSlideCss=“活动”；
第三方CSS=“”；
打破
案例2：
firstSlideCss=“”；
第二个slidecss=“”；
thirdsidecss=“活动”；
打破
违约：
打破
}
}
}

也许这可以帮助你：@JasonD谢谢你的评论。我看到了这个链接，它需要javascript，但我需要不带javascript的解决方案，并且已经在问题陈述中提到了它。如果不想使用JavaScript，则应该考虑为Blazor专门设计的其他组件。这里有一个这样的例子：