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>