Blazor Webassembly 中的 JavaScript 免费 Bootstrap Carousel [英] JavaScript free Bootstrap Carousel in Blazor Webassembly

查看：31
本文介绍了Blazor Webassembly 中的 JavaScript 免费 Bootstrap Carousel的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我是 Blazor 的新手.

我在 .NET 5 的 Blazor Webassembly 项目中创建了一个轮播.它不会自动滑动，其上一个和下一个按钮也不起作用.

请建议如何在没有 javascript 的情况下解决它.

下面是我的代码.

<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=第一张幻灯片">
<div class="carousel-item"><img class="d-block w-100";src="/images/slide/slide-2.jpg";alt=第二张幻灯片">

<div class="carousel-item"><img class="d-block w-100";src="/images/slide/slide-3.jpg";alt=第三张幻灯片">

<a class="carousel-control-prev";href="#carouselExampleIndicators";角色=按钮"数据幻灯片=上一个"><span class="carousel-control-prev-icon";aria-hidden="true"></span><span class="sr-only">Previous</span></a><a class="carousel-control-next";href="#carouselExampleIndicators";角色=按钮"数据幻灯片=下一个"><span class="carousel-control-next-icon";aria-hidden="true"></span><span class="sr-only">Next</span></a>

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

解决方案

经过广泛的研究，现在我能够在不使用 javascript 的情况下在 blazor 中自动滚动轮播.我还让上一个和下一个按钮工作并添加了该功能:当用户单击上一个或下一个时，它进入手动模式并自动停止滚动.以下是我的解决方案:

@page "/";@using System.Threading;<div id="carouselExampleIndicators";class =旋转木马幻灯片"data-ride=轮播"><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=第一张幻灯片">

<div class="carousel-item @secondSlideCss"><img class="d-block w-100";src="/images/slide/slide-2.jpg";alt=第二张幻灯片">

<div class="carousel-item @thirdSlideCss"><img class="d-block w-100";src="/images/slide/slide-3.jpg";alt=第三张幻灯片">

<a class="carousel-control-prev";href="";角色=按钮"数据幻灯片=上一个"@onclick=()=>手动(真)"><span class="carousel-control-prev-icon";aria-hidden="true"></span><span class="sr-only">Previous</span></a><a class="carousel-control-next";href="";角色=按钮"数据幻灯片=下一个"@onclick=()=>手动(假)"><span class="carousel-control-next-icon";aria-hidden="true"></span><span class="sr-only">Next</span></a>

@代码{字符串 firstSlideCss = "active";字符串 secondSlideCss = "";字符串thirdSlideCss ="；int currentPosition = 0;int currentSlide = 0;CancellationTokenSource cts;CancellationToken ct;受保护的覆盖异步任务 OnInitializedAsync(){cts = 新的 CancellationTokenSource();ct = cts.Token;等待演练(ct)；}公共异步任务演练(CancellationToken ct){while (!ct.IsCancellationRequested){等待 Task.Delay(2500, ct);当前位置++；更改幻灯片()；await InvokeAsync(() => this.StateHasChanged());}}手动公共无效(向后布尔){cts.Cancel();如果(向后)当前位置 - ;别的当前位置++；更改幻灯片()；}私有无效 ChangeSlide(){currentSlide = Math.Abs​​(currentPosition % 3);开关 (currentSlide){案例0:firstSlideCss =活动"；secondSlideCss = "";第三个SlideCss =";休息;情况1:firstSlideCss = "";secondSlideCss =活动"；第三个SlideCss =";休息;案例2:firstSlideCss = "";secondSlideCss = "";第三个SlideCss =活动"；休息;默认:休息;}}}

I am new to Blazor.

I have created a carousel in Blazor Webassembly project in .NET 5. It is not sliding automatically and its previous and next buttons are not working.

Please suggest how to solve it without javascript.

Below is my code.

<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: I am working with default project template generated by VS 2019 and .NET 5 and have not included any extra javascript file.

解决方案

After extensive research now I am able to auto scroll the carousel in blazor without javascript. I also got prev and next buttons working and added the feature: when user clicks on prev or next it enters into manual mode and it stops scrolling automatically. Below is my solution:

@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;
        }
    }
}

这篇关于Blazor Webassembly 中的 JavaScript 免费 Bootstrap Carousel的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆