All for Joomla All for Webmasters

Bootstrap carousel

The Bootstrap carousel is a flexible, responsive way that is used to add a slider to your webpage. It is very responsive and flexible enough to allow, images, iframes, videos, or any other type of content that you want to add.

The Carousel Plugin:

The carousel plugin is a component for cycling through element, like a carousel. If you want to add plugin functionality individually, then you have to use carousel.js file or all at once (using “bootstrap.js” or “bootstrap.min.js”).

Bootstrap carousel Example

Let’s take a carousel example and see how to create a basic carousel.

  1. <!DOCTYPE html>
  2. <html lang=“en”>
  3.   <head>
  4.      <title>Bootstrap Carousel</title>
  5.      <link rel=“stylesheet” href=“https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css”/>
  6.   </head>
  7. <style>
  8.   .carousel-inner > .item > img,
  9.   .carousel-inner > .item > a > img {
  10.       width: 80%;
  11.       margin: auto;
  12.   }
  13. </style>
  14.   <body>
  15. <div class=“container”>
  16.   <h1>Carousel Example</h1>
  17. <div id=“myCarousel” class=“carousel slide” data-ride=“carousel”>
  18.     <!– Indicators –>
  19.     <ol class=“carousel-indicators”>
  20.       <li data-target=“#myCarousel” data-slide-to=“0” class=“active”></li>
  21.       <li data-target=“#myCarousel” data-slide-to=“1”></li>
  22.       <li data-target=“#myCarousel” data-slide-to=“2”></li>
  23.     </ol>
  24.     <!– Wrapper for slides –>
  25.     <div class=“carousel-inner” role=“listbox”>
  26.       <div class=“item active”>
  27.         <img src=“images/jokes1.jpg” alt=“jokes 1” >
  28.       </div>
  29.       <div class=“item”>
  30.         <img src=“images/jokes2.jpg” alt=“jokes 2” >
  31.       </div>
  32.       <div class=“item”>
  33.         <img src=“images/jokes3.jpg” alt=“jokes 3” >
  34.       </div>
  35.     </div>
  36.     <!– Left and right controls –>
  37.     <a class=“left carousel-control” href=“#myCarousel” role=“button” data-slide=“prev”>
  38.       <span class=“glyphicon glyphicon-chevron-left” aria-hidden=“true”></span>
  39.       <span class=“sr-only”>Previous</span>
  40.     </a>
  41.     <a class=“right carousel-control” href=“#myCarousel” role=“button” data-slide=“next”>
  42.       <span class=“glyphicon glyphicon-chevron-right” aria-hidden=“true”></span>
  43.       <span class=“sr-only”>Next</span>
  44.     </a>
  45. </div><!– corousel end –>
  46. </div>
  47. <script src=“https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js”></script>
  48.   <script src=“http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js”></script>
  49.   </body>
  50. </html>

Bootstrap carousel Example: add captions to slides

If you want to add captions to the slides, then you have to add <div class=”carousel-caption”> within each <div class=”item”> .

  1. <!DOCTYPE html>
  2. <html lang=“en”>
  3.   <head>
  4.      <title>Job</title>
  5.      <link rel=“stylesheet” href=“https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css”/>
  6.   </head>
  7. <style>
  8.   .carousel-inner > .item > img,
  9.   .carousel-inner > .item > a > img {
  10.       width: 80%;
  11.       margin: auto;
  12.   }
  13. </style>
  14. <body>
  15. <div class=“container”>
  16.   <h1>Carousel Example</h1>
  17. <div id=“myCarousel” class=“carousel slide” data-ride=“carousel”>
  18.     <!– Indicators –>
  19.     <ol class=“carousel-indicators”>
  20.       <li data-target=“#myCarousel” data-slide-to=“0” class=“active”></li>
  21.       <li data-target=“#myCarousel” data-slide-to=“1”></li>
  22.       <li data-target=“#myCarousel” data-slide-to=“2”></li>
  23.     </ol>
  24.     <!– Wrapper for slides –>
  25.     <div class=“carousel-inner” role=“listbox”>
  26.       <div class=“item active”>
  27.         <img src=“images/jokes1.jpg” alt=“jokes 1” >
  28.         <h3>Santa-Banta</h3>
  29.         <p>Read Santa-Banta jokes at makeforsure.</p>
  30.       </div>
  31.       <div class=“item”>
  32.         <img src=“images/jokes2.jpg” alt=“jokes 2” >
  33.          <h3>Santa-Banta</h3>
  34.         <p>Read Santa-Banta jokes at makeforsure.</p>
  35.       </div>
  36.       <div class=“item”>
  37.         <img src=“images/jokes3.jpg” alt=“jokes 3” >
  38.          <h3>Santa-Banta</h3>
  39.         <p>Read Santa-Banta jokes at makeforsure.</p>
  40.       </div>
  41.     </div>
  42.     <!– Left and right controls –>
  43.     <a class=“left carousel-control” href=“#myCarousel” role=“button” data-slide=“prev”>
  44.       <span class=“glyphicon glyphicon-chevron-left” aria-hidden=“true”></span>
  45.       <span class=“sr-only”>Previous</span>
  46.     </a>
  47.     <a class=“right carousel-control” href=“#myCarousel” role=“button” data-slide=“next”>
  48.       <span class=“glyphicon glyphicon-chevron-right” aria-hidden=“true”></span>
  49.       <span class=“sr-only”>Next</span>
  50.     </a>
  51. </div><!– corousel end –>
  52. </div>
  53.   <script src=“https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js”></script>
  54.   <script src=“http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js”></script>
  55.   </body>
  56. </html>

 

PinIt
submit to reddit

Leave a Reply

Top