We will learn how to create a Simple Responsive Carousel using the Twitter Bootstrap Framework. The Carousels also known as slide shows are useful to show new or highlighted content on top of the page. It can show lot of images/headlines while consuming less space on a web page. Carousels made with Bootstrap are responsive which means they can adapts the layout to the viewing environment providing easy reading and navigation across a wide range of devices such as desktop computers, tables or mobile phones.
Now we are going to create Responsive Carousel using Twitter Bootstrap.
Step 1:
Include the below code in <head></head> section of webpage. Carousel needs jQuery to function properly, which has been included in below code.
|
1 2 3 4 5 6 7 8 |
<!-- These are bootstrap framework Files --> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css"> <!-- Optional theme --> <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap-theme.min.css"> <!-- Latest compiled and minified JavaScript --> <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script> <script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script> |
Step 2:
Carousel code includes indicators, wrappers for slides and controls.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 |
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> <!-- Indicators --> <!-- if you increase or decrease slides then also change indicators accordingly --> <ol class="carousel-indicators"> <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> <li data-target="#carousel-example-generic" data-slide-to="1"></li> <li data-target="#carousel-example-generic" data-slide-to="2"></li> </ol> <!-- Wrapper for slides --> <div class="carousel-inner"> <!-- First Slide --> <div class="item active"> <!-- This is image path what will appear in slide --> <img src="1.png" alt="..."> <div class="carousel-caption"> <h3>Sample Heading</h3> <p>Sample Description here</p> </div> </div> <!-- Second Slide --> <div class="item"> <img src="3.png" alt="..."> <div class="carousel-caption"> <h3>Sample Heading 2</h3> </div> </div> <!-- Third Slide --> <div class="item"> <img src="4.png" alt="..."> <div class="carousel-caption"> <h3>Sample Heading 3</h3> </div> </div> ... </div> <!-- Controls --> <!-- These are the previous and net buttons on both sides of slides --> <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span> </a> <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span> </a> </div> |
Complete Code:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 |
<!DOCTYPE HTML> <html> <head> <meta http-equiv="content-type" content="text/html" /> <meta name="author" content="umar hassan - earlysandwich.com" /> <title>Responsive Carousel</title> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css"> <!-- Optional theme --> <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap-theme.min.css"> <!-- Latest compiled and minified JavaScript --> <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script> <script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script> <style>.item{background: #333;text-align: center;height: 315px !important;} .carousel-inner > .item > img, .carousel-inner > .item > a > img{display: inline-block !important;} </style> </head> <body> <div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> <!-- Indicators --> <ol class="carousel-indicators"> <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> <li data-target="#carousel-example-generic" data-slide-to="1"></li> <li data-target="#carousel-example-generic" data-slide-to="2"></li> </ol> <!-- Wrapper for slides --> <div class="carousel-inner"> <div class="item active"> <img src="1.png" alt="..."> <div class="carousel-caption"> <h3>Sample Heading</h3> <p>Sample Description here</p> </div> </div> <div class="item"> <img src="3.png" alt="..."> <div class="carousel-caption"> <h3>Sample Heading 2</h3> </div> </div> <div class="item"> <img src="4.png" alt="..."> <div class="carousel-caption"> <h3>Sample Heading 3</h3> </div> </div> ... </div> <!-- Controls --> <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span> </a> <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span> </a> </div> </body> </html> |
