Java script geht nicht - Druckversion

Code:
<!DOCTYPE html">

<html><head>



  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    

  <meta http-equiv="X-UA-Compatible" content="IE=edge">

  <meta name="viewport" content="width=device-width, initial-scale=1">

  

  <style>

  



* {

  box-sizing: border-box;

}



body {

  max-width: 1440px;

  margin: auto;

}



.slider-wrapper {

  margin: 1rem;

  position: relative;

  overflow: hidden;

 

}



.slides-container {

  height: calc(100vh - 2rem);

  width: 100%;

  display: flex;

  list-style: none;

  margin: 0;

  padding: 0;

}





.slide-arrow {

  position: absolute;

  display: flex;

  top: 0;

  bottom: 0;

  margin: auto;

  height: 4rem;

  background-color: white;

  border: none;

  width: 2rem;

  font-size: 3rem;

  padding: 0;

  cursor: pointer;

  opacity: 0.5;

  transition: opacity 100ms;

}



.slide-arrow:hover,

.slide-arrow:focus {

  opacity: 1;

}



#slide-arrow-prev {

  left: 0;

  padding-left: 0.25rem;

  border-radius: 0 2rem 2rem 0;

}



#slide-arrow-next {

  right: 0;

  padding-left: 0.75rem;

  border-radius: 2rem 0 0 2rem;

}



.slide {

  width: 100%;

  /* height: 100%; */

  flex: 1 0 100%;

  display: flex;

  justify-content: center;

  align-items: center;





}

.slide > img {

  width: 80%;

  height: 80%;





}



.slide:nth-child(1) {

  background-color: #49b293;

}



.slide:nth-child(2) {

  background-color: #b03532;

}



.slide:nth-child(3) {

  background-color: #6a478f;

  margin: 0;

}



.slide:nth-child(4) {

  background-color: #da6f2b;

}





</style>





</head>

<body>

<!-- <section id="galerie"> -->

        

  <section class="slider-wrapper">

    <button class="slide-arrow" id="slide-arrow-prev">

      ‹

    </button>

    <button class="slide-arrow" id="slide-arrow-next">

      ›

    </button>

    <div class="slides-container"  id="slides-container">

      <div class="slide"><img src="images/walach1.jpg" alt="Image 1"></div>

      <div class="slide"><img src="images/walach2.jpg" alt="Image 2"></div>

      <div class="slide"><img src="images/walach3.jpg" alt="Image 3"></div>

      <div class="slide"><img src="images/walach4.jpg" alt="Image 4"></div>

      <div class="slide"><img src="images/walach5.jpg" alt="Image 5"></div>

      <div class="slide"><img src="images/walach6.jpg" alt="Image 6"></div>

      <div class="slide"><img src="images/walach7.jpg" alt="Image 7"></div>

      <div class="slide"><img src="images/walach8.jpg" alt="Image 8"></div>

      <div class="slide"><img src="images/walach9.jpg" alt="Image 9"></div>

    </div>

  </section>



          

     

    

  <script>

    

    const slidesContainer = document.getElementById("slides-container");

  const slide = document.querySelector(".slide");

  const prevButton = document.getElementById("slide-arrow-prev");

  const nextButton = document.getElementById("slide-arrow-next");

  

  nextButton.addEventListener("click", () => {

    const slideWidth = slide.clientWidth;

    slidesContainer.scrollLeft += slideWidth;

  });

  

  prevButton.addEventListener("click", () => {

    const slideWidth = slide.clientWidth;

    slidesContainer.scrollLeft -= slideWidth;

  });

    

    </script>



</body></html>