i have a problem. I am new to building webpages. I am trying to build two exact the same slideshow container on my webpage. The containers are showing of nice. The problem is that the buttons under my slide-show containers both work for the upper one. The lower slideshow container is not working. It stays on the first picture. Can anyone tell me what's wrong with my code?

Thanks a lot guys!!

<div>
      <div >
        <div >
          <div >1 / 9</div>
          <img src="/Bilder Weinberg/Wohzimmer111.jpg" style="width: 100%" />
        </div>

        <div >
          <div >2 / 9</div>
          <img
            src="/Bilder Weinberg/WohzimmerSofaecke111.jpg"
            style="width: 100%"
          />
        </div>

        <div >
          <div >3 / 9</div>
          <img
            src="/Bilder Weinberg/SchlafzimmerEinzelbetten111.jpg"
            style="width: 100%"
          />
        </div>

        <div >
          <div >4 / 9</div>
          <img
            src="/Bilder Weinberg/Schlafzimmeroben111.jpg"
            style="width: 100%"
          />
        </div>

        <div >
          <div >5 / 9</div>
          <img
            src="/Bilder Weinberg/KleideraufbewahrungOben111.jpg"
            style="width: 100%"
          />
        </div>

        <div >
          <div >6 / 9</div>
          <img
            src="/Bilder Weinberg/Kücheblickraus111.jpg"
            style="width: 100%"
          />
        </div>

        <div >
          <div >7 / 9</div>
          <img
            src="/Bilder Weinberg/KücheSitzecke111.jpg"
            style="width: 100%"
          />
        </div>

        <div >
          <div >8 / 9</div>
          <img
            src="/Bilder Weinberg/Esstischwintergarten111.jpg"
            style="width: 100%"
          />
        </div>

        <div >
          <div >9 / 9</div>
          <img
            src="/Bilder Weinberg/StühleWintergarten111.jpg"
            style="width: 100%"
          />
        </div>

        <a  onclick="plusSlides(-1)">❮</a>
        <a  onclick="plusSlides(1)">❯</a>
      </div>
      <br />

      <div style="text-align: center">
        <span  onclick="currentSlide(1)"></span>
        <span  onclick="currentSlide(2)"></span>
        <span  onclick="currentSlide(3)"></span>
        <span  onclick="currentSlide(4)"></span>
        <span  onclick="currentSlide(5)"></span>
        <span  onclick="currentSlide(6)"></span>
        <span  onclick="currentSlide(7)"></span>
        <span  onclick="currentSlide(8)"></span>
        <span  onclick="currentSlide(9)"></span>
      </div>

      <script>
        let slideIndex = 1;
        showSlides(slideIndex);

        function plusSlides(n) {
          showSlides((slideIndex  = n));
        }

        function currentSlide(n) {
          showSlides((slideIndex = n));
        }

        function showSlides(n) {
          let i;
          let slides = document.getElementsByClassName("mySlides");
          let dots = document.getElementsByClassName("dot");
          if (n > slides.length) {
            slideIndex = 1;
          }
          if (n < 1) {
            slideIndex = slides.length;
          }
          for (i = 0; i < slides.length; i  ) {
            slides[i].style.display = "none";
          }
          for (i = 0; i < dots.length; i  ) {
            dots[i].className = dots[i].className.replace(" active", "");
          }
          slides[slideIndex - 1].style.display = "block";
          dots[slideIndex - 1].className  = " active";
        }
      </script>
    </div>

    <h3 >Kutscherwohnung</h3>
    <p id="kutscher">
      Kutscherwohnung Einer weitere traumhafte Ferienwohung in Strande bei Kiel.
      Kaum enfernt vom Wasser die frische Luft genießen.
    </p>

    <div>
      <div >
        <div >
          <img src="/Bilder Weinberg/Wohzimmer111.jpg" style="width: 100%" />
        </div>

        <div >
          <img
            src="/Bilder Weinberg/WohzimmerSofaecke111.jpg"
            style="width: 100%"
          />
        </div>

        <div >
          <img
            src="/Bilder Weinberg/SchlafzimmerEinzelbetten111.jpg"
            style="width: 100%"
          />
        </div>

        <div >
          <img
            src="/Bilder Weinberg/Schlafzimmeroben111.jpg"
            style="width: 100%"
          />
        </div>

        <div >
          <img
            src="/Bilder Weinberg/KleideraufbewahrungOben111.jpg"
            style="width: 100%"
          />
        </div>

        <div >
          <img
            src="/Bilder Weinberg/Kücheblickraus111.jpg"
            style="width: 100%"
          />
        </div>

        <div >
          <img
            src="/Bilder Weinberg/KücheSitzecke111.jpg"
            style="width: 100%"
          />
        </div>

        <div >
          <img
            src="/Bilder Weinberg/Esstischwintergarten111.jpg"
            style="width: 100%"
          />
        </div>

        <div >
          <img
            src="/Bilder Weinberg/StühleWintergarten111.jpg"
            style="width: 100%"
          />
        </div>

        <a  onclick="plusFolien(-1)">❮</a>
        <a  onclick="plusFolien(1)">❯</a>
      </div>
      <br />

      <div style="text-align: center">
        <span  onclick="currentSlide(1)"></span>
        <span  onclick="currentSlide(2)"></span>
        <span  onclick="currentSlide(3)"></span>
        <span  onclick="currentSlide(4)"></span>
        <span  onclick="currentSlide(5)"></span>
        <span  onclick="currentSlide(6)"></span>
        <span  onclick="currentSlide(7)"></span>
        <span  onclick="currentSlide(8)"></span>
        <span  onclick="currentSlide(9)"></span>
      </div>

      <script>
        let folieNumber = 1;
        showFolie(folieNumber);

        function plusFolie(n) {
          showFolie((folieNumber  = n));
        }

        function currentFolie(n) {
          showFolie((folieNumber = n));
        }

        function showFolie(n) {
          let i;
          let folie = document.getElementsByClassName("kutscherFolie");
          let buttons = document.getElementsByClassName("button");
          if (n > folie.length) {
            folieNumber = 1;
          }
          if (n < 1) {
            folieNumber = folie.length;
          }
          for (i = 0; i < folie.length; i  ) {
            folie[i].style.display = "none";
          }
          for (i = 0; i < buttons.length; i  ) {
            buttons[i].className = buttons[i].className.replace(" active", "");
          }
          folie[folieNumber - 1].style.display = "block";
          buttons[slideNumber - 1].className  = " active";
        }
      </script>
    </div>

CodePudding user response：

First, both the slides below and above are calling the same function.

"currentSlide"

I think the slide below should call another function. "currentFolie" And there's a typo. There is no "plusFolien" function. Maybe it's a "showFolie" function.