Bootstrap 轮播图像堆栈
Bootstrap Carousel image stack
我正在尝试学习如何使用 bootstrap 轮播。我的问题是我的两个图像相互堆叠。我已经查看了 100 遍代码,但无法找出问题所在。
<div id="filmSnurraID" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#filmSnurraID" data-slide-to="0" class="active"></li>
<li data-target="#filmSnurraID" data-slide-to="1"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="./frukt2.jpg" alt="Ett plan">
<div class="carousel-caption"><h3>Ett plan</h3></div>
</div>
<div class="item">
<img src="./frukt1.jpg" alt="Ett annat plan">
</div>
</div>
<a class="left carousel-control" href="#filmSnurraID" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#filmSnurraID" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
这里有什么问题?
我想,您没有在代码中正确导入 Bootstrap CSS。
如您所见 ERROR CODEPEN,我已经删除了 Bootstrap CDN。
因此请按照以下步骤操作。
您只需要按正确顺序堆叠 css/script 个文件
CSS 进口
- Bootstrap CSS CDN/File 导入
JS 导入
- Jquery CDN
- Bootstrap JS CDN(依赖于Jquery,因此需要先加载Jquery)
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/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/3.3.7/js/bootstrap.min.js"></script>
<div id="filmSnurraID" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#filmSnurraID" data-slide-to="0" class="active"></li>
<li data-target="#filmSnurraID" data-slide-to="1"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img src="http://keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg" alt="Ett plan">
<div class="carousel-caption">
<h3>Ett plan</h3>
</div>
</div>
<div class="item">
<img src="https://www.aussiespecialist.com/content/asp/en_sg/sales-resources/image-and-video-galleries/jcr:content/mainParsys/hero/image.adapt.1663.medium.jpg" alt="Ett annat plan">
</div>
</div>
<a class="left carousel-control" href="#filmSnurraID" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#filmSnurraID" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
我正在尝试学习如何使用 bootstrap 轮播。我的问题是我的两个图像相互堆叠。我已经查看了 100 遍代码,但无法找出问题所在。
<div id="filmSnurraID" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#filmSnurraID" data-slide-to="0" class="active"></li>
<li data-target="#filmSnurraID" data-slide-to="1"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="./frukt2.jpg" alt="Ett plan">
<div class="carousel-caption"><h3>Ett plan</h3></div>
</div>
<div class="item">
<img src="./frukt1.jpg" alt="Ett annat plan">
</div>
</div>
<a class="left carousel-control" href="#filmSnurraID" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#filmSnurraID" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
这里有什么问题?
我想,您没有在代码中正确导入 Bootstrap CSS。 如您所见 ERROR CODEPEN,我已经删除了 Bootstrap CDN。
因此请按照以下步骤操作。
您只需要按正确顺序堆叠 css/script 个文件
CSS 进口
- Bootstrap CSS CDN/File 导入
JS 导入
- Jquery CDN
- Bootstrap JS CDN(依赖于Jquery,因此需要先加载Jquery)
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/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/3.3.7/js/bootstrap.min.js"></script>
<div id="filmSnurraID" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#filmSnurraID" data-slide-to="0" class="active"></li>
<li data-target="#filmSnurraID" data-slide-to="1"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img src="http://keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg" alt="Ett plan">
<div class="carousel-caption">
<h3>Ett plan</h3>
</div>
</div>
<div class="item">
<img src="https://www.aussiespecialist.com/content/asp/en_sg/sales-resources/image-and-video-galleries/jcr:content/mainParsys/hero/image.adapt.1663.medium.jpg" alt="Ett annat plan">
</div>
</div>
<a class="left carousel-control" href="#filmSnurraID" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#filmSnurraID" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>