Advertisement
Guest User

carousel

a guest
Mar 31st, 2015
342
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 1.88 KB | None | 0 0
  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="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
  8.   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  9.   <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
  10.   <style>
  11.   .carousel-inner > .item > img,
  12.   .carousel-inner > .item > a > img {
  13.       width: 70%;
  14.       margin: auto;
  15.   }
  16.   </style>
  17. </head>
  18. <body>
  19.  
  20. <div class="container">
  21.   <br>
  22.   <div id="myCarousel" class="carousel slide" data-ride="carousel">
  23.     <!-- Indicators -->
  24.     <ol class="carousel-indicators">
  25.       <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
  26.       <li data-target="#myCarousel" data-slide-to="1"></li>
  27.     </ol>
  28.  
  29.     <!-- Wrapper for slides -->
  30.     <div class="carousel-inner" role="listbox">
  31.       <div class="item active">
  32.         <img src="http://www.revista.espiritolivre.org/wp-content/uploads/2014/07/so-logo.png" alt="imagem 1" width="460" height="345">
  33.       </div>
  34.  
  35.       <div class="item">
  36.         <img src="http://www.revista.espiritolivre.org/wp-content/uploads/2014/07/so-logo.png" alt="imagem 2" width="460" height="345">
  37.       </div>
  38.    
  39.     </div>
  40.  
  41.     <!-- Left and right controls -->
  42.     <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
  43.       <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
  44.       <span class="sr-only">Previous</span>
  45.     </a>
  46.     <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
  47.       <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
  48.       <span class="sr-only">Next</span>
  49.     </a>
  50.   </div>
  51. </div>
  52.  
  53. </body>
  54. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement