<main>
  <section style="background-color: red">Slide 1</section>
  <section style="background-color: blue">Slide 2</section>
  <section style="background-color: green">Slide 3</section>
  <section style="background-color: orange">Slide 4</section>
  <section style="background-color: yellow">Slide 5</section>
  <section style="background-color: purple">Slide 6</section>
  <section style="background-color: gold">Slide 7</section>
</main>
<nav>
  <span id="prev-slide">&lt;</span>
  <span id="next-slide">&gt;</span>
</nav>
nav {
  /* Set nav to be fixed at bottom of page */
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  
  /* Center Content */
  display: flex;
  justify-content: center;
}

nav span {
  /* A little whitespace to please the eye */
  padding: 8px;
  /* Give a clear indication that these can be clicked */
  cursor: pointer;
}


/* 
  Below if from previous articles 
  https://terodox.tech/building-a-slide-show-part1-scroll-snap/
*/
body {
  margin: 0;
  padding: 0
}

main {
  padding: 0;
  height: 100vh;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
}

section {
  height: 100vh;
  scroll-snap-align: start;
}
function getCurrentState() {
    const windowHeight = window.innerHeight
  const mainElement = document.querySelector('main');
  const scrollTop = mainElement.scrollTop;
  
  return { mainElement, scrollTop, windowHeight };
}

function nextSlide() {
  const { mainElement, scrollTop, windowHeight } = getCurrentState();
  event.preventDefault()
    event.stopPropagation()
    mainElement.scrollTo({
      top: scrollTop + windowHeight,
      behavior: 'smooth'
    })
}

function prevSlide() {
    const { mainElement, scrollTop, windowHeight } = getCurrentState();
    event.preventDefault()
    event.stopPropagation()
    mainElement.scrollTo({
      top: scrollTop - windowHeight,
      behavior: 'smooth'
    })
}

document.addEventListener('keydown', (event) => {
  if(event.code === 'ArrowLeft' || event.code === 'ArrowUp') {
    prevSlide(event);
  }
  if(event.code === 'ArrowRight' || event.code === 'ArrowDown') {
    nextSlide(event);
  }
})

document.getElementById('prev-slide').addEventListener('click', prevSlide)

document.getElementById('next-slide').addEventListener('click', nextSlide)
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.