Horje Website
Bs Carousel2 Stacked – Bootstrap Carousel – Bootstrap Carousel – Bootstrap Code

Bs Carousel2 Stacked – Bootstrap Carousel

Bs Carousel2 Stacked - Bootstrap Carousel - Bootstrap Carousel - Bootstrap Code


 
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <title>Bootstrap Example</title>
  5. <meta charset="utf-8">
  6. <meta name="viewport" content="width=device-width, initial-scale=1">
  7. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  8. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  9. <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
  10. </head>
  11. <body>
  12. <div class="container">
  13. <h2>Carousel Example</h2>
  14. <div id="myCarousel" class="carousel slide" data-ride="carousel">
  15. <!-- Indicators -->
  16. <ol class="carousel-indicators">
  17. <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
  18. <li data-target="#myCarousel" data-slide-to="1"></li>
  19. <li data-target="#myCarousel" data-slide-to="2"></li>
  20. </ol>
  21. <!-- Wrapper for slides -->
  22. <div class="carousel-inner">
  23. <div class="item active">
  24. <img src="la.jpg" alt="Los Angeles" style="width:100%;">
  25. <div class="carousel-caption">
  26. <h3>Los Angeles</h3>
  27. <p>LA is always so much fun!</p>
  28. </div>
  29. </div>
  30. <div class="item">
  31. <img src="chicago.jpg" alt="Chicago" style="width:100%;">
  32. <div class="carousel-caption">
  33. <h3>Chicago</h3>
  34. <p>Thank you, Chicago!</p>
  35. </div>
  36. </div>
  38. <div class="item">
  39. <img src="ny.jpg" alt="New York" style="width:100%;">
  40. <div class="carousel-caption">
  41. <h3>New York</h3>
  42. <p>We love the Big Apple!</p>
  43. </div>
  44. </div>
  46. </div>
  47. <!-- Left and right controls -->
  48. <a class="left carousel-control" href="#myCarousel" data-slide="prev">
  49. <span class="glyphicon glyphicon-chevron-left"></span>
  50. <span class="sr-only">Previous</span>
  51. </a>
  52. <a class="right carousel-control" href="#myCarousel" data-slide="next">
  53. <span class="glyphicon glyphicon-chevron-right"></span>
  54. <span class="sr-only">Next</span>
  55. </a>
  56. </div>
  57. </div>
  58. </body>
  59. </html>



Try Your Self ->



Published:
 October 4, 2020
Author:
 admin
Category:
 Bootstrap 3, Bootstrap Source Code
Views:
 19

This article was posted in Bootstrap 3, Bootstrap Source Code and tagged , , . Bookmark the permalink. Follow comments with the RSS feed for this post.Post a Comment or leave a trackback: Trackback URL.

Leave a Reply

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

 

Horje © 2011 - 2023