Bootstrap.v3轮播图

最新推荐文章于 2023-06-27 10:57:02 发布

heshuaicsdn

最新推荐文章于 2023-06-27 10:57:02 发布

阅读量1.3k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： bootstrap 文章标签： bootstrap 插件轮播图

本文链接：https://blog.youkuaiyun.com/heshuaicsdn/article/details/79696202

bootstrap 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了如何使用Bootstrap v3创建轮播图，包括设置大盒子carousel并添加slide类，详细讲解了轮播图的结构组成，如carousel的三个主要部分，并强调了a标签的属性以及通过.carousel-caption添加标题的功能。建议读者参考菜鸟教程以了解更多的JS方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

引入bootstrap插件什么的就不说了；

步骤：
1. 一个包着所有内容大盒子给它取名 class=”carousel “如果需要动画效果，再加一个 “slide”
2. “carousel” 内分为三部分；
3. 都在下面的图里；
4. 注意：第三部分的a标签也有两个属性：
5.

data-target=".carousel"  data-slide="prev"(左)
                  右按钮：data-slide="next"

6.可以通过 .item 内的 .carousel-caption 元素向幻灯片添加标题

结构图：

轮播结构图

例子：

<div class="container">
  <div class="carousel slide" data-ride="carousel">
      <div class="carousel-inner">
          <div class="item active">
              <img src="img/Aurelionsol_0.jpg" alt="">
              <div class="carousel-caption">
                  <h4>图片标题1</h4>
                  <p>描述文本1</p>
              </div>
          </div>
          <div class="item">
              <img src="img/Ahri_0.jpg" alt="">
              <div class="carousel-caption">
                  <h4>图片标题2</h4>
                  <p>描述文本3</p>
              </div>
          </div>
          <div class="item">
              <img src="img/Akali_0.jpg" alt="">
              <div class="carousel-caption">
                  <h4>图片标题3</h4>
                  <p>描述文本3</p>
              </div>
          </div>
          <div class="item">
              <img src="img/Annie_0.jpg" alt="">
              <div class="carousel-caption">
                  <h4>图片标题4</h4>
                  <p>描述文本4</p>
              </div>
          </div>
      </div>
      <ul class="carousel-indicators">
          <li class="active" data-target=".carousel" data-slide-to="0"></li>
          <li data-target=".carousel" data-slide-to="1"></li>
          <li data-target=".carousel" data-slide-to="2"></li>
          <li data-target=".carousel" data-slide-to="3"></li>
      </ul>
      <a href="javascript:" class="carousel-control left" data-target=".carousel" data-slide="prev">
          <span class="glyphicon glyphicon-chevron-left"></span>
      </a>
      <a href="javascript:" class="carousel-control right" data-target=".carousel" data-slide="next">
          <span class="glyphicon glyphicon-chevron-right"></span>
      </a>
  </div>
</div>