How do I add 'keyup' to my code to move my gallery slideshow left and right using the keyboard buttons?

Question

This is my first question on here (and my first ever project!)

I'm trying to add 'keyup' functionality (or something similar) to my image gallery slideshow to allow my slideshow to move left and right upon hitting the left or right button on the keyboard.

At the moment, I'm using CSS keyframes to move my images with a left/right button, but I also have used a timer to play/pause them.

Here is what my code looks like (minus the timer):

var indexOfSlides,slides,dots,captionText;
function startSlides(){
    indexOfSlides = 0;
    slides=document.getElementsByClassName("slide");
    slides[indexOfSlides].style.opacity=1;

    captionText=document.querySelector(".captionTextHolder .captionText");
    captionText.innerText=slides[indexOfSlides].querySelector(".captionText").innerText;

    //disable nextPrevBtn if slide count is one
    if(slides.length<2){
        var nextPrevBtns=document.querySelector(".leftArrow,.rightArrow");
        nextPrevBtns.style.display="none";
        for (i = 0; i < nextPrevBtn.length; i++) {
            nextPrevBtn[i].style.display="none";
        }
    }

}
startSlides();
function addSlides(n) {
    slideMover(indexOfSlides+n);
}
function slideMover(n){
    var i;
    var current,next;
    var slideMoverAnimClass={
          forCurrent:"",
          forNext:""
    };
    var slideTextAnimClass;
    if(n>indexOfSlides) {
        if(n >= slides.length){n=0;}
        slideMoverAnimClass.forCurrent="moveLeftCurrentSlide";
        slideMoverAnimClass.forNext="moveLeftNextSlide";
        slideTextAnimClass="slideTextFromTop";
    }else if(n<indexOfSlides){
        if(n<0){n=slides.length-1;}
        slideMoverAnimClass.forCurrent="moveRightCurrentSlide";
        slideMoverAnimClass.forNext="moveRightPrevSlide";
        slideTextAnimClass="slideTextFromBottom";
    }

    if(n!=indexOfSlides){
        next = slides[n];
        current=slides[indexOfSlides];
        for (i = 0; i < slides.length; i++) {
            slides[i].className = "slide";
            slides[i].style.opacity=0;
            dots[i].classList.remove("active");
        }
        current.classList.add(slideMoverAnimClass.forCurrent);
        next.classList.add(slideMoverAnimClass.forNext);
        dots[n].classList.add("active");
        indexOfSlides=n;
        captionText.style.display="none";
        captionText.className="captionText "+slideTextAnimClass;
        captionText.innerText=slides[n].querySelector(".captionText").innerText;
        captionText.style.display="block";
    }

}

Does anyone know how I could go about adding keyup to this to move the images left/right using the keyboard? Any help would be much appreciated!

Answer 1

you could simply add key up event listener.

window.addEventListener('keyup', (e) => {
    // assuming the indexOfSlides is the index of current slide and slide mover is the function to move to a specific slide
    if(e.which == 37){
        slideMover(indexOfSlides - 1);
    }else if(e.which == 39){
        slideMover(indexOfSlides + 1);
    }
})