Bootstrap实现轮播图（简便方法）

Gliese_

于 2020-06-19 16:41:44 发布

阅读量789

点赞数

文章标签： bootstrap javascript

本文链接：https://blog.csdn.net/weixin_47357543/article/details/106859227

版权

本文介绍了如何使用Bootstrap4创建轮播图，特别是当图片数量较多时，通过JavaScript动态添加图片以避免代码冗余，提高代码可读性。同时，提到了如何添加caption说明文字。

摘要由CSDN通过智能技术生成

Bootstrap4官网
轮播图源代码：

<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">
    <div class="carousel-item active">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item