Bootstrap 轮播不会从第一个图像滑动，并且在 Blazor 应用程序中加载速度非常慢

如何解决Bootstrap 轮播不会从第一个图像滑动，并且在 Blazor 应用程序中加载速度非常慢

在单击“下一个”或“上一个”按钮/或指示器之前，轮播不会从一张图片滑到下一张图片。单击其中任何一个后，它可以正常工作。

这是我的代码：

html code in CarouselBlock.razor

index.html 文件中的引导扩展：

  <!--bootstrap JS extensions-->
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" 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>

处理播放/暂停按钮的方法

  private void PausePlayToggle()
{
    // Console.WriteLine("from pause play button");
    if(IconState== "pause")
    {
        IconState = "play";
        IntervalValue = IntervalValue * 9000;
    }
    else
    {
        IconState = "pause";
        IntervalValue = 3000;
    }
}

我通过 imageset 参数将字符串列表中的图像 URL（存在于 CDN 中）传递给组件，这就是我在 MainLayout.razor 中加载 Carousel 组件的方式：

 <CarouselBlock imageset="@CDNImages" OnCarouselLoadComplete="displayPanelChanged" /> 

图像加载很慢，并显示出像正在加载一些动画（如从上到下）的过渡。 请告诉我是否可以在 Blazor 中预加载图像并帮助我避免加载这些图像的延迟并自动滑动第一张图像。