JavaScript free Bootstrap Carousel in Blazor Webassembly

Question

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.

Answer 1

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