html - 我怎样才能让引导轮播让它工作?
问题描述
我有一个问题,因为当我单击链接中的箭头时,URL 会显示 carouselExampleIndicators。所有代码都被 1:1 重写,所以我不知道出了什么问题
<header>
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<!-- Slide One - Set the background image for this slide in the line below -->
<div class="carousel-item active" style="background-image: url('https://source.unsplash.com/LAaSoL0LrYs/1920x1080')">
<div class="carousel-caption d-none d-md-block">
<h2 class="display-4">First Slide</h2>
<p class="lead">This is a description for the first slide.</p>
</div>
</div>
<!-- Slide Two - Set the background image for this slide in the line below -->
<div class="carousel-item" style="background-image: url('https://source.unsplash.com/bF2vsubyHcQ/1920x1080')">
<div class="carousel-caption d-none d-md-block">
<h2 class="display-4">Second Slide</h2>
<p class="lead">This is a description for the second slide.</p>
</div>
</div>
<!-- Slide Three - Set the background image for this slide in the line below -->
<div class="carousel-item" style="background-image: url('https://source.unsplash.com/szFUQoyvrxM/1920x1080')">
<div class="carousel-caption d-none d-md-block">
<h2 class="display-4">Third Slide</h2>
<p class="lead">This is a description for the third slide.</p>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" 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="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</header>
<!DOCTYPE html>
<html lang="en">
解决方案
推荐阅读
- java - Embeddable 中的 JPA ElementCollection 未持久化
- google-cloud-platform - 在 Google Cloud Platform 上启动 Jupyter notebook 时出错
- php - PHP: msqyl 加入 self 和 LIKE 查询
- javascript - 在 Typescript React App 中指定特定的道具并接受一般的 HTML 道具
- android - Android:使用文本观察器编辑文本中每 10 位数字后的空格
- google-chrome - 本地机器上的 Chrome 无头屏幕截图
- php - PHP Yii1 语法错误或访问冲突:1064
- php - 从与 PHP 一起使用的 HTML 模板中获取内部 html
- android - 密码函数:OPENSSL_internal:BAD_DECRYPT in android Oreo
- mysql - 对匹配条件sql的2个表的某些列求和