Bootstrap 轮播（Carousel）插件

旧城等待， 2022-03-21 14:00 372阅读 0赞

Bootstrap 轮播（Carousel）插件是一种灵活的响应式的向站点添加滑块的方式。

## 用法 ##

*  **通过 data 属性**：使用 data 属性可以很容易控制轮播（Carousel）的位置。
    
     *  属性 **data-slide** 接受关键字 *prev* 或 *next*，用来改变幻灯片相对于当前位置的位置。
     *  使用 **data-slide-to** 来向轮播传递一个原始滑动索引，**data-slide-to="2"** 将把滑块移动到一个特定的索引，索引从 0 开始计数。
     *  **data-ride="carousel"** 属性用于标记轮播在页面加载时就开始动画播放。
 *  **通过 JavaScript**：轮播（Carousel）可通过 JavaScript 手动调用，如下所示：
    
        $('.carousel').carousel()

## 选项 ##

有一些选项是通过 data 属性或 JavaScript 来传递的。下表列出了这些选项：

<table> 
 <tbody> 
  <tr> 
   <th>选项名称</th> 
   <th>类型/默认值</th> 
   <th>Data 属性名称</th> 
   <th>描述</th> 
  </tr> 
  <tr> 
   <td>interval</td> 
   <td>number<br><em>默认值：5000</em></td> 
   <td><span style="color:#f33b45;">data-interval</span></td> 
   <td>自动循环每个项目之间延迟的时间量。如果为 false，轮播将不会自动循环。</td> 
  </tr> 
  <tr> 
   <td>pause</td> 
   <td>string<br><em>默认值："hover"</em></td> 
   <td>data-pause</td> 
   <td>鼠标进入时暂停轮播循环，鼠标离开时恢复轮播循环。</td> 
  </tr> 
  <tr> 
   <td>wrap</td> 
   <td>boolean<br><em>默认值：true</em></td> 
   <td>data-wrap</td> 
   <td>轮播</td> 
  </tr> 
 </tbody> 
</table>

### 一、可选标题的轮播： ###

加载就轮播，间隔 2s

<div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="2000">
                
                <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="./image/abc123.jpg" alt="First slide" >
                        <div class="carousel-caption">标题1 可不可不要</div>
                    </div>
                    <div class="item">
                        <img src="./image/aaa.jpg" alt="Second slide">
                    </div>
                    <div class="item">
                        <img src="./image/bbb.jpg" alt="Third slide">
                        <div class="carousel-caption">标题 3</div>
                    </div>
                </div>
                
                <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
                    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                    <span class="sr-only">Previous</span>
                </a>
                <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
                    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                    <span class="sr-only">Next</span>
                </a>
            </div>

**JavaScript** 详情参考官网或菜鸟教程：[http://www.runoob.com/bootstrap/bootstrap-carousel-plugin.html][http_www.runoob.com_bootstrap_bootstrap-carousel-plugin.html]

[http_www.runoob.com_bootstrap_bootstrap-carousel-plugin.html]: http://www.runoob.com/bootstrap/bootstrap-carousel-plugin.html