我的引导传送带有什么问题?是错误的 Bootstrap style/javascript 文件吗?

Question

嗨，亲爱的专家，你能在以下问题上帮助我吗？ 在尝试使用引导程序制作幻灯片时，我面临两个问题，1。幻灯片堆叠在另一个幻灯片下方。2.滑梯不能骑乘或从一侧滑到另一侧。3. 下一个/上一个字形未显示。

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">

此外，我还包含了最新的引导JavaScript链接。这些链接位于结束正文标签的正上方。 我的代码如下。

<div id="my-slider" class="carousel slide" data-ride="carousel" data-interval="2000">
<!-- indicators dot nav -->
<ol class="carousel-indicators">
<li data-target="#my-slider" data-slide-to="0" class="active"></li>
<li data-target="#my-slider" data-slide-to="1"></li>
<li data-target="#my-slider" data-slide-to="2"></li>
</ol>
<!-- wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item-active">
<img src="images/background-2.jpg" alt="fruits" style="width: 100%"/>
<div class="carousel-caption">
<h1>This is first slide</h1>
</div>
</div>
<div class="item-active">
<img src="images/background-3.jpg" alt="fruits" style="width: 100%"/>
<div class="carousel-caption">
<h1>This is second slide</h1>
</div>
</div>
<div class="item-active">
<img src="images/background-4.jpg" alt="fruits" style="width: 100%"/>
<div class="carousel-caption">
<h1>This is third slide</h1>
</div>
</div>
</div>
<!-- controls or next or prev buttons -->
<a href="#my-slider" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a href="#my-slider" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>

Answer 1

轮播项目中的每个轮播项中都有类item-active。将类替换为carousel-item类item-active并仅将第一项设置为active。

<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<img src="images/background-2.jpg" alt="fruits" style="width: 100%"/>
<div class="carousel-caption">
<h1>This is first slide</h1>
</div>
</div>
<div class="carousel-item">
<img src="images/background-3.jpg" alt="fruits" style="width: 100%"/>
<div class="carousel-caption">
<h1>This is second slide</h1>
</div>
</div>
<div class="carousel-item">
<img src="images/background-4.jpg" alt="fruits" style="width: 100%"/>
<div class="carousel-caption">
<h1>This is third slide</h1>
</div>
</div>
</div>

看起来您已经使用了 Bootstrap 3 轮播，但您已经加载了 Bootstrap 4 CSS 和 JS。因此，请参阅此处的引导程序 4 轮播示例。

由于 Bootstrap 3 和 4 的类差异而无法加载的图标。因此，请复制/粘贴整个 Bootstrap 4 示例并与您的内容一起编辑它。