Modernizing a simple slideshow and extending

Created for answer to http://stackoverflow.com/questions/29909392/slideshow-script-using-php-and-javascript/29942863 explaining how to modernize the slideshow code from http://www.dynamicdrive.com/dynamicindex14/preloadslide.htm

by UselessCode

HTML

<img id="slide"></td>
<div class="slide-controls">
  <span class="button" id="prev-slide">&laquo; Previous</span>
  <span class="button" id="next-slide">Next &raquo;</span>
</div>
<div class="slide-controls">
  <span class="button" id="first-slide">&laquo; First</span>
  <span class="button" id="last-slide">Last &raquo;</span>
</div>

CSS

.button {
  border: 1px outset #333;
  padding: 1em;
  display: inline-block;

  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}
.button:active {
  border-style: inset;
}
.disabled {
  color: #ccc;
  border-color: #ccc;
}
.disabled:active {
  border-style: outset;
}
.slide {
  width: 300px;
  height: 200px;
}
.slide-controls {
  width: 300px;
  position: relative;
}
#next-slide, #last-slide {
  position: absolute;
  right: 0;
}

JavaScript

(function () {
    'use strict';
    var slides = [
        'http://www.placecage.com/300/200',
        'http://www.placecage.com/g/300/200',
        'http://www.placecage.com/c/300/200',
        'http://www.placecage.com/gif/300/200'
      ],
      currentSlide = 0,
      doc = document,
      elSlide = doc.getElementById('slide'),
      elPrev = doc.getElementById('prev-slide'),
      elNext = doc.getElementById('next-slide'),
      elFirst = doc.getElementById('first-slide'),
      elLast = doc.getElementById('last-slide'),
  
      showSlide = function (index) {
        if (index > -1 && index < slides.length) {
          currentSlide = index;
          [elPrev, elNext, elFirst, elLast].forEach(function (element) {
            element.classList.remove('disabled');
          });
          if (index === 0) {
            elPrev.classList.add('disabled');
            elFirst.classList.add('disabled');
          } else if (index === slides.length - 1) {
            elNext.classList.add('disabled');
            elLast.classList.add('disabled');
          }
          elSlide.src = slides[index];
          elSlide.title = 'Picture ' + (index + 1) + 'of ' + slides.length;
        }
      },
      changeSlide = function (step) {
          var index = currentSlide + step;
          showSlide(index);
      },
      prevSlide = changeSlide.bind(null, -1),
      nextSlide = changeSlide.bind(null, 1),
      firstSlide = showSlide.bind(null, 0),
      lastSlide = showSlide.bind(null, slides.length - 1);
  
    elPrev.addEventListener('click', prevSlide, false);
    elNext.addEventListener('click', nextSlide, false);
    elFirst.addEventListener('click', firstSlide, false);
    elLast.addEventListener('click', lastSlide, false);
      
    showSlide(0);
  }());