Results Website Design's company banner with logo showing increased sales.
Results Website Design's company banner with logo showing increased sales.

Pure Javascript Carousel

All photos taken by Giorgio Galeotti, and are CC BY 4.0 license.
JavaScript
window.onload = function() {

  //set height of contanier holding absolutely positioned img (so CSS has a val to use for the page layout) --- 
  setContainerHeight();
  //also set container height on resize
  window.addEventListener("resize", setContainerHeight);
  //definition of function to set container height
  function setContainerHeight() {
    //use first image's size as a reference since they will all be the same dimensions
    var firstPic = document.getElementById("slide-container").firstElementChild;
    var firstPicHeight = window.getComputedStyle(firstPic, null).getPropertyValue("height");
    document.getElementById("slide-container").style.height = firstPicHeight;
  }

  //restore opacity to each image subsequent to the first ---
  //opacity was set to 0 in CSS so no images appeared in the stack before the first animated into position
  //initialize a variable that contains every image except the first one
  var notFirstElements = document.getElementsByClassName("notFirst");
  //a loop to restore opacity to each image (subsequent to the first) before it needs to display
  for (i = 0; i < notFirstElements.length; i++) {
    setTimeout(restoreOpacity, 400, notFirstElements[i]);
  }
  //definition of function to restore opacity  
  function restoreOpacity(elementToRestore) {
    elementToRestore.style.opacity = 1;
  }

  //create an array that contains the image id names ---
  //create empty array
  var imageIds = [];
  //create a variable equal to the number of images
  var numberOfSlides = document.getElementById("slide-container").childElementCount;
  //a loop that pushes each image id into the array in the format "img-x"
  for (i = 1; i <= numberOfSlides; i++) {
    imageIds.push("img-" + i);
  }

  //setup for slider ---
  //create variable for the index number of image in the array being worked with
  var index = 0;
  //remove class containing CSS animation from the first slide near animation completion
  var firstElement = document.getElementById("img-1");
  setTimeout(removeClass, 300, firstElement);
  //removeClass function defined
  function removeClass(element) {
    void element.offsetWidth;
    element.classList.remove("moves");
  }
  //init variable for z-index of image currently displayed
  var onTop = 1;
  //create variable for interval between each slide showing
  var origInterval = 2000;
  var currentInterval = origInterval;
  //display each slide at interval (functionName, ms)
  var myTimer = setInterval(showSlide, origInterval);

  //define function to show the next slide ---
  function showSlide() {
    //advance to next index in the array of images
    index++;
    //but if the next slide index number goes beyond the number of indexes in the array, go to the first slide
    if (index === numberOfSlides) {
      index = 0;
    }
    //if the index number is before the first index in the array, go to the last slide
    if (index < 0) {
      index = numberOfSlides - 1;
    }
    //set a variable equal to the image at the current array index
    var element = document.getElementById(imageIds[index]);
    //add the animation class to the current image, so it begins to move into position
    element.classList.add("moves");
    //increase z-index counter by 1
    onTop++;
    //assign higher z-index to current img (so it displays on top of other stacked images)
    element.style.zIndex = onTop;
    //remove the class containing the animation from the current slide near animation completion
    setTimeout(removeClass, 300, element);
  }

  //"Next" button ---
  //when "Next" button is clicked, run the advance function
  document.getElementById("next").addEventListener("click", advance);
  //definition of advance function
  function advance() {
    //show next slide as normal
    showSlide();
    //clear the setInterval time elapsed, so auto slide advance doesn't happen right after a manual advance
    clearInterval(myTimer);
    //restart the setInterval method to automatically advance slides;
    //clearing and then restarting this method has the effect of resetting the time elapsed back to zero
    myTimer = setInterval(showSlide, origInterval);
  }
  
  //"Previous" button ---
  //when "Previous" button is clicked, run the previous function
  document.getElementById("prev").addEventListener("click", previous);
  //definition of previous function
  function previous() {
    //set index back 2, so showSlide will display slide back 1 index position
    index -= 2;
    //show next slide as normal
    showSlide();
    //clear the setInterval time elapsed, so auto slide advance doesn't happen right after a manual slide change
    clearInterval(myTimer);
    //restart the setInterval method to automatically advance slides;
    //clearing and then restarting this method has the effect of resetting the time elapsed back to zero
    myTimer = setInterval(showSlide, origInterval);
  } 
};
CSS
#window {
  width: 100%;
}
#slide-container {
  position: relative;
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
}
#slide-container img {
  position: absolute;
  display: block;
  width: 100%;
  height: auto;
}
/*set z-index of the first slide displayed*/
#img-1 {
  z-index: 1;
}
/*the page background can be seen before
first slide comes into position*/
.notFirst {
  opacity: 0;
}
.moves {
  animation: slideIn .4s;
}
@keyframes slideIn {
  from {
    left: -500px;
  }
  to {
    left: 0;
  }
}
#credits-container {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
}
#credits-container span {
  margin-top: 5px;
  text-align: center;
}
#credits-container div {
  margin-top: 5px;
}
#buttons-container {
    width: 100%;
    margin-top: 5px;
    display: flex;
    justify-content: center;
}
#next {
    margin-left: 12px;
}
HTML
<div id="window">
  <div id="slide-container">
    <img id="img-1" class="moves" src="http://example.jpg">
    <img id="img-2" class="notFirst" src="http://example.jpg">
    <img id="img-3" class="notFirst" src="http://example.jpg">
    <img id="img-4" class="notFirst" src="http://example.jpg">
    <img id="img-5" class="notFirst" src="http://example.jpg">
    <img id="img-6" class="notFirst" src="http://example.jpg">
    <img id="img-7" class="notFirst" src="http://example.jpg">
  </div>
  <div id="credits-container">
    <span>All photos taken by <a href="http://fotodispalle.com/" 
          target="_blank">Giorgio Galeotti</a>, and are 
          <a href="https://creativecommons.org/licenses/by/4.0/deed.en"
          target="_blank">CC BY 4.0</a> license.
    </span>
  </div>
  <div id="buttons-container">
    <button id="prev" class="wpforms-submit">Previous</button>
    <button id="next" class="wpforms-submit">Next</button>
  </div>
</div>