1.引入bootstrap的css文件和js文件,记得在之前引入jq的js文件。
2.利用一下这个demo块引入轮播图,也可以详见官方文档。
<div id="demo" class="carousel slide banner-image" data-ride="carousel">
<ul class="carousel-indicators">
<li data-target="#demo" data-slide-to="0" class="active"></li>
<li data-target="#demo" data-slide-to="1"></li>
</ul>
<div class="carousel-inner" style="height:340px">
<div class="carousel-item active">
<img src="../../img/banner.png">
</div>
<div class="carousel-item">
<img src="../../img/banner.png">
</div>
</div>
<!-- 左右切换按钮 -->
<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>
3.相应的设置图片宽高等,审查元素,修改对应的class就行。