Angular 8 Asp.net核心项目中的Bootstrap 4轮播不会自动更改图像

Question

我按照这个例子创建了这个轮播。 https://www.w3schools.com/bootstrap4/tryit.asp?filename=trybs_carousel 轮播不会切换图像。所以说有时我点击箭头然后它开始重复，但其他时候甚至没有开始。只能手动工作。我也添加了 data-interval="2000" 但没有帮助。请指导

<div class="container">
        <div class="row">
                <div class="col-md-8 col-md-offset-2">
                    <div id="demo" class="carousel slide" data-interval="2000" data-ride="carousel">

                        <!-- Indicators -->
                        <ul class="carousel-indicators">
                            <li data-target="#demo" data-slide-to="0" class="active"></li>
                            <li data-target="#demo" data-slide-to="1"></li>
                            <li data-target="#demo" data-slide-to="2"></li>
                        </ul>

                        <!-- The slideshow -->
                        <div class="carousel-inner">
                            <div class="carousel-item active">
                                <img src="assets/Desert.jpg" width="1100" height="500">
                            </div>
                            <div class="carousel-item">
                                <img src="assets/Jellyfish.jpg" width="1100" height="500">
                            </div>
                            <div class="carousel-item">
                                <img src="assets/Lighthouse.jpg" width="1100" height="500">
                            </div>
                        </div>

                        <!-- Left and right controls -->
                        <a class="carousel-control-prev" href="#demo" data-slide="prev">
                            <span class="carousel-control-prev-icon"></span>
                        </a>
                        <a class="carousel-control-next" href="#demo" data-slide="next">
                            <span class="carousel-control-next-icon"></span>
                        </a>
                    </div>
                </div>
            </div>
</div>

此外，在 .Net 的 head 部分的 index.html 和 index.cshtml 文件中添加了这些引用

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

Answer 1

您需要通过 javascript 为 carrousel 设置间隔

$(document).ready(function(){
  $('#demo').carousel({
    interval: 2000,
     cycle: true
  });
});