bootstrap轮播插件使用方法

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/
请尊重作者的劳动成果,转载请注明出处!书影博客保留对文章的所有权利。

如果您喜欢这篇博文,欢迎您捐赠书影博客: ,查看支付宝二维码

Pingbacks已关闭。

评论
  1. 悲观主义 悲观主义 发布于 2015年2月6日 16:19 #

    赞!

  2. 孔令依 孔令依 发布于 2015年7月7日 13:45 #

    没效果呀

  3. 小白 小白 发布于 2015年11月14日 15:17 #

    尺寸怎么改啊

  4. 在线疯狂 在线疯狂 发布于 2015年11月14日 22:21 #

    调整容器的尺寸

  5. 期待和希望 期待和希望 发布于 2016年2月29日 10:53 #

    可以单独调整宽度和高度吗?

  6. 在线疯狂 在线疯狂 发布于 2016年2月29日 20:17 #

    可以设置容器的宽度和高度。

  7. 卯熙 卯熙 发布于 2016年4月28日 10:38 #

    怎么兼容IE啊,在IE浏览器没有过渡,是直接跳到下一张

  8. 发 发布于 2016年5月12日 23:11 #

    调整容器的宽都是按比例缩放啊,,没法单独设置宽和高

  9. Jie唯爱 Jie唯爱 发布于 2016年10月25日 17:35 #

    恩 宽度100% 而且窗口可能会扩大缩小-width随时变化 求解怎么解决[可怜]

  10. 涵 发布于 2017年3月7日 14:36 #

    请问向左和向右的那两个箭头的位置是怎么修改的?

张贴您的评论