let currentSlide = -1;
// Elements
+
+let slideshow = document.getElementsByClassName("slideshow")[0];
+let container = document.getElementsByClassName("slides")[0];
let slides = document.getElementsByClassName("slide");
let dots = document.getElementsByClassName("dot");
let stateBtn = document.getElementById("state");
var timeout;
var paused = false;
+// Set up event listeners
+window.addEventListener("resize", setHeights, true);
+slideshow.addEventListener("mouseenter", mouseEnter, true);
+slideshow.addEventListener("mouseleave", mouseLeave, true);
+document.getElementById("prev").addEventListener("click", prevSlide);
+document.getElementById("next").addEventListener("click", nextSlide);
+document.getElementById("state").addEventListener("click", changeState);
+if (dots.length - 1 != maxIndex) {
+ console.log("Number of control dots does not match number of slides");
+}
+for (i = 0; i <= dots.length - 1; i++) {
+ dots[i].addEventListener("click", goToSlide);
+ dots[i].slide = i;
+}
+
+
// Start the slideshow
playSlideshow();
// Recursive function that advances the slide and then calls itself with a
// delay
function playSlideshow() {
+ setHeights();
nextSlide();
timeout = setTimeout(playSlideshow, INTERVAL);
}
// Change the slide to a given index
function setSlide(slide) {
-
if (slide < 0 || slide > maxIndex) {
- console.log("Attempted to change to slide outside range");
+ console.log("Attempted to change to slide outside range (" + slide.toString() + ")");
return;
}
currentSlide = slide;
}
+function setHeights() {
+ var firstSlideHeight = slides[0].offsetHeight;
+ // Set heights (based on height of first slide with 100% width)
+ for (i = 1; i <= maxIndex; i++) {
+ var captionHeight = slides[i].getElementsByTagName("figcaption")[0].offsetHeight;
+ // Set figure height
+ slides[i].style.height = slides[0].offsetHeight.toString() + "px";
+ // Set image height
+ slides[i].getElementsByTagName("img")[0].style.height = (firstSlideHeight - captionHeight).toString() + "px";
+ }
+}
+
function nextSlide() {
// Go to the next slide
if (currentSlide == maxIndex) {
}
}
+function goToSlide(evt) {
+ // Go to a slide specified by the event (called when the dots are clicked)
+ setSlide(evt.currentTarget.slide);
+}
+
function mouseEnter() {
// Pause the slideshow
clearTimeout(timeout);