Advertisement
Guest User

images

a guest
Jan 19th, 2020
88
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 1.92 KB | None | 0 0
  1. <html>
  2.     <head>
  3.         <!-- all i need for working with bootstrap -->
  4.         <title>Boot Strap 4 - 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/4.3.1/css/bootstrap.css">
  8.         <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.js"></script>
  9.         <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.js"></script>
  10.         <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.js"></script>
  11.         <style>
  12.             .carousel-inner img{
  13.                 width: 100%;
  14.                 height: 100%;
  15.             }
  16.         </style>
  17.     </head>
  18.     <body>
  19.         <div class="container">
  20.             <div id="demo" class="carousel slide" data-ride="carousel">
  21.                 <!-- indicators -->
  22.                 <ul class="carousel-indicators">
  23.                     <li data-traget="#demo" data-slide-to="0" class="active"></li>
  24.                     <li data-traget="#demo" data-slide-to="1"></li>
  25.                     <li data-traget="#demo" data-slide-to="2"></li>
  26.                     <li data-traget="#demo" data-slide-to="3"></li>
  27.                 </ul>
  28.                
  29.                 <!-- the slideshow -->
  30.                 <div class="carousel-inner" id="myPic">
  31.                    
  32.                 </div>
  33.                 <script>
  34.                     var totalImages=4;
  35.                     var myImages = "<div class=\"carousel-item active\"><img src=\"pic1.jpg\" width=\"480\" height=\"480\"/></div>"
  36.                     for (var counter=1;counter<=totalImages;counter+=1){
  37.                         myImages+= "<div class=\"carousel-item \"><img src=\"pic"+(counter+1)+".jpg\" width=\"480\" height=\"480\"/></div>"
  38.                    
  39.                     }
  40.                     console.log(myImages);
  41.                     myPic.innerHTML=myImages;
  42.                 </script>
  43.                
  44.                 <!-- left and right controls -->
  45.                 <a class="carousel-control-prev" href="#" data-slide="prev">
  46.                     <span class="carousel-control-prev-icon"></span>
  47.                 </a>
  48.                 <a class="carousel-control-next" href="#" data-slide="next">
  49.                     <span class="carousel-control-next-icon"></span>
  50.                 </a>
  51.             </div>
  52.         </div>
  53.     </body>
  54. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement