Full Width Responsive Carousel with jQuery and Bootstrap 3

A fully responsive and full width content carousel/slider built on top of jQuery, Bootstrap 3 and Html5, no any more Javascript and CSS needed.

View more:

• Top 50 Best Carousel jQuery Plugins

How to use it:

1. Include the necessary jQuery javascript library and Twitter's Bootstrap 3 from a CDN in your web page.

<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>

2. Create a bottom indicator for your content 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>

3. Add your carousel contents in the inner element.

<div class="carousel-inner">
  <div class="item active"> <img src="3.jpg" style="width:100%" data-src="holder.js/900x500/auto/#7cbf00:#fff/text: " alt="First slide">
    <div class="container">
      <div class="carousel-caption">
        <h1> Headling 1 </h1>
        <p> Description 1</p>
      </div>
    </div>
  </div>
  <div class="item"> <img src="2.jpg" style="width:100%" data-src="" alt="Second slide">
    <div class="container">
      <div class="carousel-caption">
        <h2>
        Headling 2
        </h1>
        <p> Description 2</p>
      </div>
    </div>
  </div>
  <div class="item"> <img src="1.jpg" style="width:100%" data-src="" alt="Third slide">
    <div class="container">
      <div class="carousel-caption">
        <h2>
        Headling 3
        </h1>
        <p> Description 3</p>
      </div>
    </div>
  </div>
</div>

4. Create navigation arrows for your content carousel.

 <a class="left carousel-control" href="#myCarousel" data-slide="prev">
   <span class="glyphicon glyphicon-chevron-left"></span>
 </a>

 <a class="right carousel-control" href="#myCarousel" data-slide="next">
   <span class="glyphicon glyphicon-chevron-right"></span>
 </a>

5. Wrap the bottom indicator, carousel contents and arrows navigation in a parent element. That's it.

<div id="myCarousel" class="carousel slide" data-ride="carousel"> 
  ...
</div>

---

This awesome jQuery plugin is developed by RetinaInc. For more Advanced Usages, please check the demo page or visit the official website.