Carousel

A slideshow component for cycling through elements such as images or slides of text. Use carousels to maximize information density and maintain context without forcing the user to scroll further down the page.

Carousel

<!-- Carousel -->
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1" class="active"></li>
<li data-target="#myCarousel" data-slide-to="2" class="active"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="http://placehold.it/460x345/00838f/ffffff?text=Slide+1" alt="" width="460" height="345">
</div>
<div class="item">
<img src="http://placehold.it/460x345/fdb719/ffffff?text=Slide+2" alt="" width="460" height="345">
</div>
<div class="item">
<img src="http://placehold.it/460x345/17a87d/ffffff?text=Slide+3" alt="" width="460" height="345">
</div>
</div>
<!-- Left and right controls -->
<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>