Bootstrap Carousel是一款实用的轮播组件,示例如下:
代码如下:
<div id="carousel-example" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example" data-slide-to="1"></li>
<li data-target="#carousel-example" data-slide-to="2"></li>
</ol><!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="http://example.com/img1.jpg" alt="..." />
<div class="carousel-caption">...</div>
</div>
<div class="item">
<img src="http://example.com/img2.jpg" alt="..." />
<div class="carousel-caption">...</div>
</div>
<div class="item">
<img src="http://example.com/img3.jpg" alt="..." />
<div class="carousel-caption">...</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span></a>
<a class="right carousel-control" href="#carousel-example" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span></a>
</div>
<script>
$(function(){
$('.carousel').carousel();
});
</script>
本文链接:http://bookshadow.com/weblog/2014/05/13/bootstrap-carousel-js/
请尊重作者的劳动成果,转载请注明出处!书影博客保留对文章的所有权利。
悲观主义 发布于 2015年2月6日 16:19 #
赞!
孔令依 发布于 2015年7月7日 13:45 #
没效果呀
小白 发布于 2015年11月14日 15:17 #
尺寸怎么改啊
在线疯狂 发布于 2015年11月14日 22:21 #
调整容器的尺寸
期待和希望 发布于 2016年2月29日 10:53 #
可以单独调整宽度和高度吗?
在线疯狂 发布于 2016年2月29日 20:17 #
可以设置容器的宽度和高度。
卯熙 发布于 2016年4月28日 10:38 #
怎么兼容IE啊,在IE浏览器没有过渡,是直接跳到下一张
发 发布于 2016年5月12日 23:11 #
调整容器的宽都是按比例缩放啊,,没法单独设置宽和高
Jie唯爱 发布于 2016年10月25日 17:35 #
恩 宽度100% 而且窗口可能会扩大缩小-width随时变化 求解怎么解决[可怜]
涵 发布于 2017年3月7日 14:36 #
请问向左和向右的那两个箭头的位置是怎么修改的?