html - Bootstrap 4.0轮播不工作
问题描述
bootstrap 4.0 中的 bootstrap carousel 不起作用,我检查了所有内容并编写了 100% 相同的代码:
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="images/pic03.jpg" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="images/pic01.jpg" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="images/pic02.jpg" alt="Third slide">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" 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="#carouselExampleControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
这些图像只是显示在彼此下方,左右按钮就像链接一样,就好像甚至没有引用引导程序一样。
解决方案
.carousel-inner img {
width: 100%;
height: 100%;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<div id="demo" class="carousel slide" 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="https://www.w3schools.com/bootstrap4/la.jpg" alt="Los Angeles" width="1100" height="500">
</div>
<div class="carousel-item">
<img src="https://www.w3schools.com/bootstrap4/chicago.jpg" alt="Chicago" width="1100" height="500">
</div>
<div class="carousel-item">
<img src="https://www.w3schools.com/bootstrap4/ny.jpg" alt="New York" 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>
我在这里插入并且它正在工作。你检查过 jquery 和 bootstrap js+css 吗?
推荐阅读
- azure - 在 Azure Python SDK 中实例化 Databricks 时如何提供序列化程序、反序列化程序和配置参数?
- database - 红移光谱 - 更新外部光谱表列类型
- c# - 如何配置 AutoMapper 仅在特定场景下处理类型转换?
- css - Vuetify 按钮未垂直对齐
- flutter - 如何在最后夹住滚动视图和容器
- javascript - 如何在同一个集合中使用循环在mongodb中查询,直到我找到空值或空值?
- java - 设置自定义路径后,Java Preferences API 在 Mac 上将数据存储在哪里?
- chart.js - Chart.JS xAxis 的备用背景颜色
- javascript - 在jquery中连接两个下拉菜单
- nginx - Nginx 502 错误网关 uWSGI