一般模式
1首先要设置一个轮播图片的容器,记得设上id。
<div id="myCarousel" class="carousel slide"></div>
2.设计轮播图片计数器。
也就是轮播下面的这个小点
三个点分别对应123.用data-slide-to参数进行控制。
data-targe参数照抄,data-slide-to="2" 将把滑块移动到一个特定的索引,索引从 0 开始计数。
<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>
3.设计图片轮播区,这个区域用来放置图片。
把图片放置在class="carousel-inner"的div区域中。
然后每个图片放在class="item"的div区域。
<div class="carousel-inner">
<div class="item active">
![](1.jpg)
</div>
<div class="item">
![](2.jpg)
</div>
<div class="item">
![](3.jpg)
</div>
</div>
最终
<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">
![](1.jpg)
</div>
<div class="item">
![](2.jpg)
</div>
<div class="item">
![](3.jpg)
</div>
</div>
</div>
设置轮播标题
这个如果需要,也可以设置,如图
<div class="item">
![](2.jpg)
<div class="carousel-caption">标题 2</div>
</div>
设置轮播导航
什么是导航?
如下
<a class="carousel-control left" href="#myCarousel"
data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel"
data-slide="next">›</a>
设置轮播自动播放
此时需要jquery出售了。interval: 设置自动播放间隔时间
<script>
$(document).ready(function() {
$('.carousel').carousel({
interval: 30
})
});
</script>
综上
<div id="myCarousel" class="carousel slide" data-interval="2">
<!-- 轮播(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">
![](1.jpg)
<div class="carousel-caption">标题 1</div>
</div>
<div class="item">
![](2.jpg)
<div class="carousel-caption">标题 2</div>
</div>
<div class="item">
![](3.jpg)
<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>
<script>
$(document).ready(function() {
$('.carousel').carousel({
interval: 30
})
});
</script>