bootstrap一个页面两个轮播的解决办法资源-CSDN文库

共6个文件

png：3个

js：1个

html：1个

bootstrap

html

两个轮播

4星 · 超过85%的资源需积分: 31 97 浏览量 2014-03-18 09:17:16 上传评论 1 收藏 1.88MB RAR 举报

资源推荐

资源详情

资源评论

收起资源包目录

bootstrap一个页面两个轮播的解决办法.rar （6个子文件）

bootstrap一个页面两个轮播的解决问题

pic

1.png 509KB

2.png 830KB

3.png 565KB

test.html 4KB

bootstrap.min.js 27KB

bootstrap.css 120KB

<!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="bootstrap.css"> </head> <body> <div id="myCarousel" class="carousel slide"> <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> <div class="carousel-inner"> <div class="item active"> <img src="pic/1.png" alt=""> <div class="carousel-caption"> <h4>First Thumbnail label</h4> <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> </div> </div> <div class="item"> <img src="pic/2.png" alt=""> <div class="carousel-caption"> <h4>Second Thumbnail label</h4> <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> </div> </div> <div class="item"> <img src="pic/3.png" alt=""> <div class="carousel-caption"> <h4>Third Thumbnail label</h4> <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> </div> </div> </div> <a class="left carousel-control" href="#myCarousel" data-slide="prev">&lsaquo;</a> <a class="right carousel-control" href="#myCarousel" data-slide="next">&rsaquo;</a> </div> <div class=""> <p >saddddddddddd</p> </div> <div id="myCarousel2" class="carousel slide"> <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> <div class="carousel-inner"> <div class="item active"> <img src="pic/1.png" alt=""> <div class="carousel-caption"> <h4>First Thumbnail label</h4> <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> </div> </div> <div class="item"> <img src="pic/2.png" alt=""> <div class="carousel-caption"> <h4>Second Thumbnail label</h4> <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> </div> </div> <div class="item"> <img src="pic/3.png" alt=""> <div class="carousel-caption"> <h4>Third Thumbnail label</h4> <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> </div> </div> </div> <a class="left carousel-control" href="#myCarousel2" data-slide="prev">&lsaquo;</a> <a class="right carousel-control" href="#myCarousel2" data-slide="next">&rsaquo;</a> </div> <script> $('#myCarousel').carousel() $('#myCarousel2').carousel() </script> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script src="bootstrap.min.js"></script> </body>

评论收藏

内容反馈