如何给网站添加bootstrap轮播图
方法其实也比较简单，基本上就是复制bootstrap网站轮播图的代码，稍加修改即可：
<!-- 轮播代码begin --><div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="3000">
<!-- 轮播（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">
<a href="http://wuli.fre9.com/jialanhua.html"><img src="<?php bloginfo('template_url'); ?>/0.jpg" alt="贾兰华老师简介"></a>
<div class="carousel-caption">贾兰华老师简介</div>
</div>
<div class="item">
<a href="http://wuli.fre9.com/kcgm"><img src="<?php bloginfo('template_url'); ?>/1.png" alt="购买教学视频"></a>
<div class="carousel-caption">购买教学视频</div>
</div>
<div class="item">
<a href="http://wuli.fre9.com/shendun.html"><img src="<?php bloginfo('template_url'); ?>/2.png" alt="免费领取物理大师神盾活动"></a>
<div class="carousel-caption">免费领取物理大师神盾活动</div>
</div>
</div>
<!-- 轮播（Carousel）导航 -->
<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> <!-- 轮播代码end-->
原来的代码中，没有红色的部分：data-ride=”carousel” data-interval=”3000″，这实际上是设置成自动轮播，时间间隔为3000毫秒。
另外直接复制上面的内容到源码中，还需要修改两个地方：
1，修改img标签的CSS，否则很容易因为图片大小不一样，导致在轮播的时候，图片时大时小，很不协调，我是在样式里面增加了代码：
#myCarousel img{
width:100%;
height:270px;
}
这样的话，就可以固定图片的宽度为所在DIV里面的整个宽度，高度也设置为了270像素，自己根据需要可以调整。
2，需要添加fonts字体到主题中：
参照官方教程添加以后，发现没有箭头，找了很久原因，结果百度一下就解决问题了，原来是没有引入fonts字体文件的原因。
相关文章
搜索文章：
联系方式：
近期文章