<!-- 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">‹</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</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>
No comments:
Post a Comment