Bootstrap 轮播 (Carousel) 插件是一种灵活的响应式的向站点添加滑块的方式. 除此之外, 内容也是足够灵活的, 可以是图像, 内嵌框架, 视频或者其他您想要放置的任何类型的内容. 如果您想要单独引用该插件的功能, 那么您需要引用 carousel.JS. 或者可以引用 Bootstrap.JS 或压缩版的 Bootstrap.min.JS.
可以通过 .item 内的 .carousel-caption 元素向幻灯片添加标题. 只需要在该处放置任何可选的 html 即可, 它会自动对齐并格式化. 下面的实例演示了这点:
- <!DOCTYPE HTML>
- <HTML>
- <head>
- <title>
- Bootstrap 实例 - 轮播 (Carousel) 插件的标题
- </title>
- <link href="/bootstrap/CSS/bootstrap.min.css" rel="stylesheet">
- <script src="/scripts/jquery.min.js">
- </script>
- <script src="/bootstrap/js/bootstrap.min.js">
- </script>
- </head>
- <body>
- <div id="myCarousel" class="carousel slide">
- <!-- 轮播 (Carousel) 指标 -->
- <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>
- <!-- 轮播 (Carousel) 项目 -->
- <div class="carousel-inner">
- <div class="item active">
- <img src="/wp-content/uploads/2014/07/slide1.png" alt="First slide">
- <div class="carousel-caption">
- 标题 1
- </div>
- </div>
- <div class="item">
- <img src="/wp-content/uploads/2014/07/slide2.png" alt="Second slide">
- <div class="carousel-caption">
- 标题 2
- </div>
- </div>
- <div class="item">
- <img src="/wp-content/uploads/2014/07/slide3.png" alt="Third slide">
- <div class="carousel-caption">
- 标题 3
- </div>
- </div>
- </div>
- <!-- 轮播 (Carousel) 导航 -->
- <a class="carousel-control left" href="#myCarousel" data-slide="prev">
- ?
- </a>
- <a class="carousel-control right" href="#myCarousel" data-slide="next">
- ?
- </a>
- </div>
- </body>
- </HTML>
结果如下所示:
用法
通过 data 属性: 使用 data 属性可以很容易控制轮播 (Carousel) 的位置.
属性 data-slide 接受关键字 prev 或 next, 用来改变幻灯片相对于当前位置的位置.
使用 data-slide-to 来向轮播床底一个原始滑动索引, data-slide-to="2" 将把滑块移动到一个特定的索引, 索引从 0 开始计数.
data-ride="carousel" 属性用于标记轮播在页面加载时就开始动画播放.
通过 JavaScript: 轮播 (Carousel) 可通过 JavaScript 手动调用, 如下所示:
$('.carousel').carousel()
更多 Bootstrap 的相关知识, 可访问: web 前端自学 https://www.html.cn/ !!
来源: http://www.css88.com/framework/bootstrap/18015.html