Each image in a Carousel is nothing but a div element having class item. This div element can have an img tag for showing image and can also contain another div with class carousel-caption for title and description as shown below :
<div class="item">
<img src="knowledge.png" class="img-responsive" />
<div class="carousel-caption">
<h3>Title</h3>
<p>Here goes description</p>
</div>
</div>
Want to learn about Bootstrap : Start Here Bootstrap Tutorial
You can show any number of images in a carousel, so that means you can have any number of div with class item. So a simple Image Carousel looks like below where class="carousel" specifies that <div> contains a carousel and slide class adds a CSS transition and animation effect. data-ride="carousel" attribute will being animating the carousel immediately when the page loads. You also need to specify class="active" to one of the item div otherwise the carousel will not be visible.
<div id="imageCarousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="item active">
<img src="aspnetlogo.jpg" class="img-responsive" />
</div>
<div class="item">
<img src="chsrplogo.jpg" class="img-responsive" />
</div>
<div class="item">
<img src="knowledge.png" class="img-responsive" />
</div>
<div class="item">
<img src="nodejslogo.jpg" class="img-responsive" />
</div>
</div>
</div>
Next if you want more advanced Carousel with indicators and Left and Right Control, you need to add little more code as shown below :
Result you can check out here : How to create Image Carousel in Bootstrap
Please Like and Share the CodingDefined Blog, if you find it interesting and helpful.
No comments:
Post a Comment