Responsive Carousel with jQuery and Bootstrap 3




full-width-responsive-carousel-with-jquery-bootstrap

Toady we will to share one fully responsive and full width content carousel/slider built on top of jQuery, Bootstrap3 and Html5, no any more Javascript and CSS needed.

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="#my<a href="http://www.jqueryscript.net/tags.php?/Carousel/">Carousel</a>" 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>

full-width-responsive-carousel-with-jquery-bootstrap

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>

May you love this cool jQuery plugin.

More awesome jQuery plugin visit here.

Leave a Reply

Your email address will not be published. Required fields are marked *