a blog for those who code

Monday, 30 January 2017

How to create Image Carousel in Bootstrap

In this post we will be discussing about creating a Image Carousel using Bootstrap Carousel Plugin. Bootstrap Carousel Plugin is a component for cycling through elements, like a carousel (slideshow). To start creating Image Carousel in Bootstrap you need to first understand how carousel works in Bootstrap.


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

Contact Us

Name

Email *

Message *

Sponsers

Best Hosting Plans

CC License