SHARE
TWEET

Untitled

a guest Jul 12th, 2019 55 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. this is the code for the HTML page slideshow
  2.  
  3. <div class="slideshow-container">
  4.  
  5.   <!-- Full-width images with number and caption text -->
  6.   <div class="mySlides fade">
  7.     <div class="numbertext">1 / 4</div>
  8.     <img src="./images/teck1.jpg" style="width:100%">
  9.     <div class="text">Caption Text</div>
  10.   </div>
  11.  
  12.   <div class="mySlides fade">
  13.     <div class="numbertext">2 / 4</div>
  14.     <img src="./images/teck2.jpg" style="width:100%">
  15.     <div class="text">Caption Two</div>
  16.   </div>
  17.  
  18.   <div class="mySlides fade">
  19.     <div class="numbertext">3 / 4</div>
  20.     <img src="./images/teck6.jpg" style="width:100%">
  21.     <div class="text">Caption Three</div>
  22.   </div>
  23.  
  24.  <div class="mySlides fade">
  25.     <div class="numbertext">4 / 4</div>
  26.     <img src="./images/teck4.jpg" style="width:100%">
  27.     <div class="text">Caption Four</div>
  28.   </div>
  29. </div>
  30. <br>
  31.  
  32. <!-- The dots/circles -->
  33. <div style="text-align:center">
  34.   <span class="dot" onclick="currentSlide(1)"></span>
  35.   <span class="dot" onclick="currentSlide(2)"></span>
  36.   <span class="dot" onclick="currentSlide(3)"></span>
  37.   <span class="dot" onclick="currentSlide(4)"></span>
  38. </div>
  39.  
  40.  
  41.  
  42.  
  43.  
  44.  
  45.  
  46.  
  47.  
  48.  
  49.  
  50.  
  51.  
  52.       this is how I styled it
  53.  
  54. .slideshow-container{
  55.   max-width: 1000px;
  56.  
  57.             margin: auto;
  58.     min-height:400px;
  59.  
  60. }
  61. .mySlides {
  62.   display: none;
  63. }
  64. .prev:hover, .next:hover {
  65.   background-color: rgba(0,0,0,0.8);
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top