JavaScript Slideshow

HTML

<div id="slideshow">
                <figure class="image">
                    <img src="https://c1.staticflickr.com/9/8584/16136057529_e7b64928d0_z.jpg"  />
               
                </figure>
                <figure class="image">
                    <img src="https://c4.staticflickr.com/8/7495/16322256485_08ee0ee36f_z.jpg" />
                    <figcaption>Insert caption</figcaption>
                </figure>

CSS

/* INSTRUCTIONS
 
All photos should be wrapped in figure elements and should be the same size
Compress photos before uploading (save originals)

*/

body {
  box-sizing:border-box
}

figure {
  margin:0
}

#slideshow {
  display:inline-block;
  padding:0;
  position:relative;
/* To position slideshow buttons */
  max-width:920px
}

.photo {
  margin:0;
  position: relative;
  /* To position captions */
}

.hide {
  display:none
}

#slideshow img {
  width:100%;
  border-top-left-radius:10px;
  border-top-right-radius:10px
}

#slideshow figcaption {
  background-color:#000;
  color:#fff;
  padding:1em;
  border-bottom-right-radius:10px;
  border-bottom-left-radius:10px;
  font-family:Helvetica,Arial,Tahoma,sans-serif;
  font-size:15px;
  line-height:150%;
  margin-top:-5px
}

#previous,#next {
  height:0;
/* Padding-bottom is added via JS; calculates based on height of image */
  position:absolute;
  top:0
}

#previous p,#next p {
  margin:0;
  display:table;
  padding:1em 10px;
  color:#fff;
  font-family:Arial;
  font-size:24px;
  background-color:#000;
  text-align:center;
  font-weight:700;
  opacity:.8;
  position:absolute;
/* positioned in relation to the #previous and #next spans */
  top:50%;
  margin-top:-1.6em
/* previously used transformY(-50%) to bring arrow up half the width of itself; not supported in IE 8 */
}

#previous p {
  left:0;
  border-radius:0 5px 5px 0
}

#next p {
  right:0;
/*moves button to right corner of span instead of left */
  border-radius:5px 0 0 5px
}

#previous {
  left:0
}

#next {
  right:0
}

#previous:hover,#next:hover {
  opacity:.5;
  cursor:pointer;
  cursor:hand
}

JavaScript

// Get array with photos
var photos = document.getElementsByTagName("figure"); // Returns object of photos
var numPhotos = photos.length;
var shownPhotoIndex;

// Hide all photos except first by giving class of "hide" (if JS is not enabled, all photos will show)
function hidePhotos() {
    for (var i = 0; i < numPhotos; i++) {
      if (photos[i] !== photos[0]) {
        photos[i].className += " hide";
      } // end if statement
    } // end for statement
  } // end hidePhotos

function positionButtons() {
    var getImage = photos[0].children[0]; // IE 8 does not support photos[0].firstElementChild;
    var imageHeight = (getImage.height);
    var imageWidth = (getImage.width);
    var paddingTop = (imageHeight / imageWidth) * 100;
    paddingTop = +paddingTop.toFixed(2);
    var percent = paddingTop + "%";
    document.getElementById("previous").style.paddingBottom = percent;
    document.getElementById("next").style.paddingBottom = percent;
  }
  
  // Add controls (if JS is not enabled; controls will not be present)
function addControls() {
    var slideshow = document.getElementById("slideshow");
    // Create buttons
    var spanNext = document.createElement("span");
    var spanPrevious = document.createElement("span");
    // Give buttons IDs
    spanNext.setAttribute("id", "next");
    spanPrevious.setAttribute("id", "previous");
    // Add buttons to slideshow div
    slideshow.appendChild(spanNext);
    slideshow.appendChild(spanPrevious);
    // Add content to buttons
    document.getElementById("next").innerHTML = "<p>>></p>";
    document.getElementById("previous").innerHTML = "<p><<</p>";
    // Calculate position of buttons
    positionButtons();
  } // end addControls
  // Find curently shown photo

function findShownPhoto() {
    for (var i = 0; i < numPhotos; i++) {
      // if the image does not contain a class of "hide"
      if (photos[i].className.indexOf("hide") == -1) {
        shownPhotoIndex = i;
      } // end if statement  
    } //...