BlazorFiddle - Blazor .Net Developer Playground and Code Editor in the Browser.

Index

@page "/"

<h1>Hello, world...!</h1>

Welcome to your new app.
@if (CDNImages != null)
{
    <div id="IndexCarousel" class="carousel slide" data-ride="carousel" data-interval="@IntervalValue">
         <ol class="carousel-indicators">
            <li data-target="#IndexCarousel" data-slide-to="0" class="active"></li>
            <li data-target="#IndexCarousel" data-slide-to="1"></li>
            <li data-target="#IndexCarousel" data-slide-to="2"></li>
         </ol>

        <div class="carousel-inner">
            <div class="carousel-item index-carousel-image active" style="background-image:url(@CDNImages[0])"> </div>
            <div class="carousel-item index-carousel-image" style="background-image:url(@CDNImages[1])"> </div>
            <div class="carousel-item index-carousel-image" style="background-image:url(@CDNImages[2])">  </div>
        </div>

        <a class="carousel-control-prev carousel-control" href="#IndexCarousel" role="button" data-slide="prev" title="Previous">
            <div class="index-carousel-caret ic-caret-left"></div>
            <span class="sr-only">Previous</span>
        </a>
        <a class="carousel-control-next carousel-control " href="#IndexCarousel" role="button" data-slide="next" title="Next">
            <div class="index-carousel-caret ic-caret-right"></div>
            <span class="sr-only">Next</span>
        </a>
    </div>
}
else
{
    <h3>Loading . . . </h3>
}
@code{
    private int IntervalValue { get; set; } = 4000;
    private List<string> CDNImages
    {
        get
        {
            List<string> paths = new List<string>();
            string FolderPath ="https://csonline.azureedge.net/www/CSWS_WEBSITE/LandingPage/Carousel/CTest/" ; 
            for (int i = 1; i <= 3; i++)
            {             
                paths.Add( FolderPath + "banner_"+ i + ".jpg");
            }
            return paths;
        }
    }
}

namespace BlazorFiddleProject
{
    using Microsoft.AspNetCore.Components.Builder;
    using Microsoft.Extensions.DependencyInjection;


    public class Startup
    {
        public void ConfigureServices(IServiceCollection services)
        {
        }

        public void Configure(IComponentsApplicationBuilder app)
        {
            app.AddComponent<App>("app");
        }
    }
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width">
    <title>BlazorFiddleProject</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
	<!-- <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous"> -->

	<script src="_content/MatBlazor/dist/matBlazor.js"></script>

    <style>
        app { }
        .index-carousel-image {
    background-position: center center;
    background-repeat: no-repeat;
    height: 400px;
    background-size: cover;
}

.carousel-indicators > li {
    width: 6px; 
    border-radius: 50%;
    height: 6px;
    background-color: transparent;
    border: 2px solid white;
    margin-top: 3px;
    margin-right: 3px;
    margin-left: 3px;
    cursor: pointer;

}

.carousel-indicators .active {
    opacity: 1;
    background-color: white;
}

    </style>

    <script type="text/javascript">
    </script>
</head>
<body>
<app>Loading...</app>

<script src="_framework/blazor.webassembly.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>

</body>
</html>

BlazorFiddle was updated from Blazor 0.7 to .NET 6.0. Your old source code could not work. You need to upgrade to latest.