Login Logout
Jump to: navigation, search

Bootstrap Carousel

<div class="col-md-6">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
  <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">[[File:Beach-1.jpg|600px]]</div>
<div class="item">[[File:Beach-2.jpg|600px]]</div>
<div class="item">[[File:Beach-3.jpg|600px]]</div>
  </div>
</div>
</div>
<div class="clearfix"></div>

Tips

Must be contained within a column, otherwise the slideshow falls apart. In this example the component is contained in a col-md-6. I also found that for the best results (for a half page), the image size was 600x400 px.

Rate us!

Did you find this article useful? Why not rate it?