Jump to content

Weazly

Members
  • Posts

    1
  • Joined

  • Last visited

Everything posted by Weazly

  1. I have the same problem. It shows the first two Slideshows with picture and arrow, but the third one shows only the arrows. HTML: <p>Slideshow 1:</p> <div class="slideshow-container"> <div class="mySlides1"> <img src="../03-bilder/halle/IMG_1.jpg" class="slide"> </div> <div class="mySlides1"> <img src="../03-bilder/halle/IMG_2.jpg" class="slide"> </div> <div class="mySlides1"> <img src="../03-bilder/halle/IMG_3.jpg" class="slide"> </div> <a class="prev" onclick="plusSlides(-1, 0)">❮</a> <a class="next" onclick="plusSlides(1, 0)">❯</a> </div> <p>Slideshow 2:</p> <div class="slideshow-container"> <div class="mySlides2"> <img src="../03-bilder/Turnier1/IMG_1.jpg" class="slide"> </div> <div class="mySlides2"> <img src="../03-bilder/Turnier1/IMG_2.jpg" class="slide"> </div> <div class="mySlides2"> <img src="../03-bilder/Turnier1/IMG_3.jpg" class="slide"> </div> <div class="mySlides2"> <img src="../03-bilder/Turnier1/IMG_4.jpg" class="slide"> </div> <a class="prev" onclick="plusSlides(-1, 1)">❮</a> <a class="next" onclick="plusSlides(1, 1)">❯</a> </div> <p>Slideshow 3:</p> <div class="slideshow-container"> <div class="mySlides3"> <img src="../03-bilder/end-of-summer/IMG_1.jpg" class="slide"> </div> <div class="mySlides3"> <img src="../03-bilder/end-of-summer/IMG_2.jpg" class="slide"> </div> <div class="mySlides3"> <img src="../03-bilder/end-of-summer/IMG_3.jpg" class="slide"> </div> <div class="mySlides3"> <img src="../03-bilder/end-of-summer/IMG_4.jpg" class="slide"> </div> <a class="prev" onclick="plusSlides(-1, 2)">❮</a> <a class="next" onclick="plusSlides(1, 2)">❯</a> </div> CSS: .mySlides1, .mySlides2, .mySlides3 {display: none} img {vertical-align: middle;} /* Slideshow container */ .slideshow-container { max-width: 1000px; position: relative; margin: auto; } /* Next & previous buttons */ .prev, .next { cursor: pointer; position: relative; top: 50%; width: auto; padding-right: 8vw; padding-left: 8vw; color: white; font-weight: bold; font-size: 8vw; transition: 0.6s ease; border-radius: 0 3px 3px 0; user-select: none; } /* Position the "next button" to the right */ .next { right: 0; border-radius: 3px 0 0 3px; } /* On hover, add a grey background color */ .prev:hover, .next:hover { background-color: #f1f1f1; color: black; } Javascript: var slideIndex = [1,2]; var slideId = ["mySlides1", "mySlides2", "mySlides3"] showSlides(1, 0); showSlides(1, 1); showSlides(1, 2); function plusSlides(n, no) { showSlides(slideIndex[no] += n, no); } function showSlides(n, no) { var i; var x = document.getElementsByClassName(slideId[no]); if (n > x.length) {slideIndex[no] = 2} if (n < 2) {slideIndex[no] = x.length} for (i = 0; i < x.length; i++) { x[i].style.display = "none"; } x[slideIndex[no]-2].style.display = "block"; }
×
×
  • Create New...