Bootstrap轮播图-蒲公英云

Bootstrap轮播图

悠悠 2022-06-17 12:17 318阅读 0赞

Bootstrap轮播图组件分三部分:
（1）图片部分：用于展示内容的图片。
（2）计数器：用于计算当前切换的图片索引。
（3）控制器：控制图片的显示对象。

第一步：
定义一个（div）容器，这个容器用class=”carousel”样式,并且给这个容器定义一个id值，方便后面采用 data 属性来声明触发：

<div id="carouselDemo" class="carousel"></div>

第二步：
轮播图片的计数器，用于显示图片的播放顺序。就是图片下方的那个白色小圆点，标记当前播放到哪张图片了。

<ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
        <li data-target="#myCarousel" data-slide-to="2"></li>
</ol>

第三步：
设置轮播图片。

<div class="carousel-inner">
        <div class="item active">
             <img src="../images/img1.jpg" alt="First slide">
        </div>
        <div class="item">
             <img src="../images/img2.jpg" alt="Second slide">
        </div>
        <div class="item">
             <img src="../images/img3.jpg" alt="Third slide">
        </div>
</div>

第四步：
给图片添加文字。有时候我们需要在图片底部添加一些文字和链接，作为图片的说明信息。我们可以使用class=”carousel-caption”样式；

<div class="carousel-caption">
    <h2>标题一</h2>
    <p>这是第一张图片</p>
</div>

第五步：
控制器：是手动操作图片左右切换的按钮。

<a class="carousel-control left" href="#carouselDemo" data-slide="prev">Prev</a>
<a class="carousel-control right" href="#carouselDemo" data-slide="next">Next</a>

以上是轮播图的基本构成，下面来详细解释其中一些属性：
（1）data-ride=”carousel”：作用于class=”carousel”最外层容器上，标记轮播在页面加载时就开始动画播放。
（2）data-target：作用于class=”carousel-indicators”的每个子元素（li）上，data-target=”#class=‘carousel’外层容器的ID或者其他选择器”。
（3）data-slide：接受关键字 prev 或 next，用来改变幻灯片相对于当前位置的位置。
（4）data-slide-to：用来传递某个帧的下标，可以用来直接跳转到某个指定的帧，帧的下标是从0开始的，定义在( li )元素上。