JavaScript Slideshow - JS into CSS

by Luis Manuel

HTML

<div id="slideshow">
                <figure>
                    <img src="https://c4.staticflickr.com/8/7495/16322256485_08ee0ee36f_z.jpg" />
                    <figcaption>This is an example of a really long caption. Here I go. Do I wrap to a second line? Wrap wrap wrap wrap. Wrap Wrap Wrap Wrap Wrap Wrap Wrap Wrap Wrap Wrap Wrap</figcaption>
                </figure>
                <figure>
                    <img src="https://c1.staticflickr.com/9/8584/16136057529_e7b64928d0_z.jpg" />
                    <figcaption>Insert caption</figcaption>
                </figure>
                <figure>
                    <img src="https://c2.staticflickr.com/8/7474/16120961661_8dc12962dd_z.jpg" />
                    <figcaption>Insert caption</figcaption>
                </figure>
               
            </div><!-- end slideshow -->

CSS

body {
  box-sizing:border-box
}

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

#slideshow figure {
  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:65.9%;
  /* Calculate this with JS so can adjust based on img height */
  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%;
  -moz-transform:translateY(-50%);
  -webkit-transform:translateY(-50%);
  -o-transform:translateY(-50%);
  -ms-transform:translateY(-50%);
  transform:translateY(-50%)
}

#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 shownPhoto;

// Hide all photos except first (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


// 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
    var getImage = photos[0].firstElementChild;
    var imageHeight = (getImage.height);
    var imageWidth = (getImage.width);
    var paddingTop = (imageHeight / imageWidth) * 100;
    paddingTop = +paddingTop.toFixed(2);
    var percent = paddingTop + "%";
    console.log(percent);
    document.getElementById("previous").style.paddingBottom = percent;
    document.getElementById("next").style.paddingBottom = percent;
} // end addControls



// Find curently shown photo
function findShownPhoto() {
  for (var i = 0; i < numPhotos; i++) {
    if (photos[i].className != "hide") {
        shownPhoto = i;
    }  // end if statement  
  } // end for statement
} // end findShownPhoto



function progressSlides() {
    var next = document.getElementById("next");
    
    // When the next button is clicked, show next photo
    next.onclick = function() {
        var...