Quotes help make search much faster. Example: "Practice Makes Perfect"

Showing posts with label Bootstrap. Show all posts
Showing posts with label Bootstrap. Show all posts

Saturday, October 26, 2013

How to implement an image Carousel using Twitter Bootstrap?

<!-- Sample Code for implementing Carousel -->


<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>
  <li data-target="#myCarousel" data-slide-to="3"></li>
  <li data-target="#myCarousel" data-slide-to="4"></li>
     </ol>
     <!-- Carousel items -->
     <!-- images are stored in the img folder which is at the same location or directory as the HTML file-->
     <div class="carousel-inner">
          <div class="active item"><img src="img/img1.jpg" width="100%" ></div>
  <div class="item"><img src="img/img2.jpg" width="100%" ></div>
  <div class="item"><img src="img/img3.jpg" width="100%" ></div>
  <div class="item"><img src="img/img4.jpg" width="100%" ></div>
  <div class="item"><img src="img/img5.jpg" width="100%" ></div>
     </div>
     <!-- Carousel nav -->
     <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
     <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
</div>

<!-- Make sure you include the necessary Bootstrap files -->
<!--The link to the CSS file in between the <head> and </head> tags -->
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">

<!--It is recommeneded that you place the following files near the closing </body> tag-->

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>

This is an example of scrolling text using Javascript.

Popular Posts