Bootstrap轮播图

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

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

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

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

***第三步***：  
设置轮播图片。

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

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

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

以上是轮播图的基本构成，下面来详细解释其中一些属性：  
（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 )元素上。