Full Width Responsive Carousel with jQuery and Bootstrap 3
File Size: | 3.42 KB |
---|---|
Views Total: | 349996 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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:
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.