引导程序示例旋转木马代码不切换幻灯片

Question

我已经研究了一个多小时，我无法从Bootstrap网站上获得旋转木马工作的示例代码。。。我唯一改变的是图像来源。我做错了什么？如果有帮助的话，这将出现在Angular项目的组件中。

<div id="ourCarousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#ourCarousel" data-slide-to="0" class="active"></li>
<li data-target="#ourCarousel" data-slide-to="1"></li>
<li data-target="#ourCarousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="..." alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="..." alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="..." alt="Third slide">
</div>
</div>
<a class="carousel-control-prev" href="#ourCarousel" 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="#ourCarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>

我知道Bootstrap正在加载，因为第一个图像与控件和指示器一起显示——唯一的问题是它们没有响应。

我把下面的代码放在主应用程序组件中，从那里调用转盘组件。

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<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.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

我还尝试在上面的代码之前和之后添加这个。。。

<script>
$("#ourCarousel").carousel();
</script>

我觉得我已经做了一切可以想象的事情来让它发挥作用，我是否错过了任何重要的步骤？

Answer 1

我试过了，但似乎没有问题。猜测javascript无法选择html。或

$(document).ready(function() {
wait for the document to load.
$("#ourCarousel").carousel()
})

$("#ourCarousel").carousel()

<!-- begin snippet: js hide: false console: true babel: false -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<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.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<div id="ourCarousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#ourCarousel" data-slide-to="0" class="active"></li>
<li data-target="#ourCarousel" data-slide-to="1"></li>
<li data-target="#ourCarousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="https://images.unsplash.com/photo-1525160354320-d8e92641c563?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=d46c460396a4572221a1aa45cf67fc6b&auto=format&fit=crop&w=1834&q=80" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://images.unsplash.com/photo-1525160354320-d8e92641c563?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=d46c460396a4572221a1aa45cf67fc6b&auto=format&fit=crop&w=1834&q=80" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://images.unsplash.com/photo-1525160354320-d8e92641c563?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=d46c460396a4572221a1aa45cf67fc6b&auto=format&fit=crop&w=1834&q=80" alt="Third slide">
</div>
</div>
<a class="carousel-control-prev" href="#ourCarousel" 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="#ourCarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>

Answer 2

我最终做的是放入上面的代码(等待文档准备好(，并将Bootstrap的导入从带有旋转木马的模块移到index.html。谢谢！