Rotate 13 Algorithm

JavaScript
function rot13(str) {
  
  // 1- Convert every character to the number portion (charCode) of the that character's HTML entity ---  
  //helpful map of HTML entities: https://unicode-table.com/en/
  //create an array containing all characters
  var indivChars = str.split("");
  //create an array of only every character that is not a capital letter
  var nonLetterRE = /[^A-Z]/g;
  var nonLetters = str.match(nonLetterRE);
  //create an empty array that will contain all the numerical values for the characters
  var numEntityArr = [];
  //cycle through array containing all characters & convert the capital letters to their character code
  //if a character does not belong to A-Z, assign it a value of 0
  for (let i = 0; i < indivChars.length; i++) {
    var numberEntity = indivChars[i].charCodeAt(0);
    if (numberEntity >= 65 && numberEntity <= 90) {
      numEntityArr.push(numberEntity);
    } else {
      numEntityArr.push(0);
    }
  }

  // 2 - shift each character code 13 positions numerically ---
  var shiftedArray = [];
  var counter = 0;
  for (let i = 0; i < numEntityArr.length; i++) {
    //if the character code represents a letter within A-M, add 13 to the character code
    if (numEntityArr[i] >= 65 && numEntityArr[i] <= 77) {
      numEntityArr[i] = numEntityArr[i] + 13;
      //push this new number into an array, along with prefix and suffix that make the character code an HTML entity
      shiftedArray.push("&#" + numEntityArr[i] + ";");
      //if the character code represents a letter within N-Z, subtract 13 from the character code
    } else if (numEntityArr[i] >= 78 && numEntityArr[i] <= 90) {
      numEntityArr[i] = numEntityArr[i] - 13;
      shiftedArray.push("&#" + numEntityArr[i] + ";");
      //if the character code is not A-Z or 0, simply add prefix and suffix to make it an HTML entity & push it into the array
    } else if (numEntityArr[i] !== 0) {
      shiftedArray.push("&#" + numEntityArr[i] + ";");
      //if the character code is 0, replace it with the corresponding index of the nonLetter array created above 
    } else if (numEntityArr[i] === 0) {
      shiftedArray.push(nonLetters[counter]);
      counter += 1;
    }
  }

  // 3 - return correct letters ---
  //join in a string the html entities and non A-Z characters pushed into shiftedArray
  var entityString = shiftedArray.join("");
  //convert the HTML entities into characters, while passing all other non-entity characters through
  //credit: http://stackoverflow.com/questions/7394748/whats-the-right-way-to-decode-a-string-that-has-special-html-entities-in-it
  function decodeHTML(html) {
    var txt = document.createElement("textarea");
    txt.innerHTML = html;
    return txt.value;
  }
  var decodedHTML = decodeHTML(entityString);
  return decodedHTML;
}

Pure JavaScript Carousel

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>

Flexbox Demo

CSS
  .flex-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 1000px;
    margin: 0 auto;
    padding: 1%;
  }
  
  .flex-item {
    width: 30%;
    max-width: 275px;
    min-width: 200px;
    margin-left: 1%;
    margin-right: 1%;
  }
  
  .image {
    width: 100%;
    height: auto;
  }
HTML
<div class="flex-container">

  <a class="flex-item" href="http://example-url.org">
    <img class="image" src="http://example-image.jpg">
    <h3 class="pic-title">Spirograph Nebula</h3>
  </a>

  <!--Each of the nine flex items follow the format above-->

</div>