mehrere Slideshows

  • Guten Tag,

    unten folgen die Formeln für meine spezielle Slideshow. Meine Frage dazu: Was muss ich ändern, damit die Slidesshows getrennt sind, das heißt statt eine Serie aus den Bildern 1-10 zwei Serien zu machen in Serie 1: 1-5 und Serie 2: 6-10?

    body {

    font-family: Verdana, sans-serif;

    margin: 0;

    }


    * {

    box-sizing: border-box;

    }


    .row > .column {

    padding: 0 8px;

    }


    .row:after {

    content: "";

    display: table;

    clear: both;

    }


    .column {

    float: left;

    width: 25%;

    }


    /* The Modal (background) */

    .modal {

    display: none;

    position: fixed;

    z-index: 1;

    padding-top: 100px;

    left: 0;

    top: 0;

    width: 100%;

    height: 100%;

    overflow: auto;

    background-color: black;

    }


    /* Modal Content */

    .modal-content {

    position: relative;

    background-color: #fefefe;

    margin: auto;

    padding: 0;

    width: 90%;

    max-width: 1200px;

    }


    /* The Close Button */

    .close {

    color: white;

    position: absolute;

    top: 10px;

    right: 25px;

    font-size: 35px;

    font-weight: bold;

    }


    .close:hover,

    .close:focus {

    color: #999;

    text-decoration: none;

    cursor: pointer;

    }


    .mySlides {

    display: none;

    }


    .cursor {

    cursor: pointer;

    }


    /* Next & previous buttons */

    .prev,

    .next {

    cursor: pointer;

    position: absolute;

    top: 50%;

    width: auto;

    padding: 16px;

    margin-top: -50px;

    color: white;

    font-weight: bold;

    font-size: 20px;

    transition: 0.6s ease;

    border-radius: 0 3px 3px 0;

    user-select: none;

    -webkit-user-select: none;

    }


    /* Position the "next button" to the right */

    .next {

    right: 0;

    border-radius: 3px 0 0 3px;

    }


    /* On hover, add a black background color with a little bit see-through */

    .prev:hover,

    .next:hover {

    background-color: rgba(0, 0, 0, 0.8);

    }


    /* Number text (1/3 etc) */

    .numbertext {

    color: #f2f2f2;

    font-size: 12px;

    padding: 8px 12px;

    position: absolute;

    top: 0;

    }


    img {

    margin-bottom: -4px;

    }


    .caption-container {

    text-align: center;

    background-color: black;

    padding: 2px 16px;

    color: white;

    }


    .demo {

    opacity: 0.6;

    }


    .active,

    .demo:hover {

    opacity: 1;

    }


    img.hover-shadow {

    transition: 0.3s;

    }


    .hover-shadow:hover {

    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);

    }

    <body>

    <img src="./richtige/1b.jpg" onclick="openModal();currentSlide(1)" class="hover-shadow cursor">

    <img src="./richtige/2b.jpg" onclick="openModal();currentSlide(2)" class="hover-shadow cursor">

    <img src="./richtige/3b.jpg" onclick="openModal();currentSlide(3)" class="hover-shadow cursor">

    <img src="./richtige/4b.jpg" onclick="openModal();currentSlide(4)" class="hover-shadow cursor">

    <img src="./richtige/5b.jpg" onclick="openModal();currentSlide(5)" class="hover-shadow cursor">

    <img src="./richtige/6b.jpg" onclick="openModal();currentSlide(6)" class="hover-shadow cursor">

    <img src="./richtige/7b.jpg" onclick="openModal();currentSlide(7)" class="hover-shadow cursor">

    <img src="./richtige/8b.jpg" onclick="openModal();currentSlide(8)" class="hover-shadow cursor">

    <img src="./richtige/9b.jpg" onclick="openModal();currentSlide(9)" class="hover-shadow cursor">

    <img src="./richtige/10b.jpg" onclick="openModal();currentSlide(10)" class="hover-shadow cursor">



    <div class="mySlides">

    <div class="numbertext">1 / 84</div>

    <img src="./richtige/1.jpg" style="width:100%">

    </div>

    <div class="mySlides">

    <div class="numbertext">2 / 84</div>

    <img src="./richtige/3.jpg" style="width:100%">

    </div>

    <div class="mySlides">

    <div class="numbertext">3 / 84</div>

    <img src="./richtige/Gäste/4.jpg" style="width:100%">

    </div>

    <div class="mySlides">

    <div class="numbertext">4 / 84</div>

    <img src="./richtige/Gäste/5.jpg" style="width:100%">

    </div>

    <div class="mySlides">

    <div class="numbertext">5 / 84</div>

    <img src="./richtige/Gäste/6.jpg" style="width:100%">

    </div>

    <div class="mySlides">

    <div class="numbertext">6 / 84</div>

    <img src="./richtige/7.jpg" style="width:100%">

    </div>

    <div class="mySlides">

    <div class="numbertext">7 / 84</div>

    <img src="./richtige/8.jpg" style="width:100%">

    </div>

    <div class="mySlides">

    <div class="numbertext">8 / 84</div>

    <img src="./richtige/9.jpg" style="width:100%">

    </div>

    <div class="mySlides">

    <div class="numbertext">9 / 84</div>

    <img src="./richtige/10.jpg" style="width:100%">

    </div>



    <script>


    function openModal() {

    document.getElementById("myModal").style.display = "block";

    }


    function closeModal() {

    document.getElementById("myModal").style.display = "none";

    }


    var slideIndex = 1;

    showSlides(slideIndex);




    function plusSlides(n) {

    showSlides(slideIndex += n);

    }


    function currentSlide(n) {

    showSlides(slideIndex = n);

    }



    function showSlides(n) {

    var i;

    var slides = document.getElementsByClassName("mySlides");

    var dots = document.getElementsByClassName("demo");

    var captionText = document.getElementById("caption");

    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";

    captionText.innerHTML = dots[slideIndex-1].alt;

    }


    </script>

    </body>