<!-- Button to trigger modal --> <a href="#lazycarouselmodal" role="button" class="btn" data-toggle="modal">Launch lazy carousel</a> <!-- Modal --> <div id="lazycarouselmodal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h3 id="myModalLabel">Lazy Carousel</h3> </div> <div class="modal-body"> <div id="lazycarousel" class="carousel slide"> <ol class="carousel-indicators"> <li data-target="#lazycarousel" data-slide-to="0" class="active"></li> <li data-target="#lazycarousel" data-slide-to="1"></li> <li data-target="#lazycarousel" data-slide-to="2"></li> </ol> <!-- Carousel items --> <div class="carousel-inner"> <div class="active item"> <img src="http://24.media.tumblr.com/b273172b94f360682fe9d9b5b78ad672/tumblr_mr80a1mhlR1st5lhmo1_1280.jpg"/> </div> <div class="item"> <img src="http://24.media.tumblr.com/408fbfeae2d8590512b9fc9cc6207090/tumblr_mr807bH7hh1st5lhmo1_1280.jpg"/> </div> <div class="item"> <img src="http://31.media.tumblr.com/11d494e09d78f3979af67e256862e85b/tumblr_mr80f71qQe1st5lhmo1_1280.jpg"/> </div> </div> <!-- Carousel nav --> <a class="carousel-control left" href="#lazycarousel" data-slide="prev">‹</a> <a class="carousel-control right" href="#lazycarousel" data-slide="next">›</a> </div> </div> <div class="modal-footer"> <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button> </div> </div>