Adaptation du code

Bonsoir, J'ai écrit ce code html au quel j'ai associé du JavaScript pour rendre le tout plus esthétique (slideshow). J'ai réussi a avoir un slideshow dans une div, mais j'aimerais en faire 3 indépendants dans des divs différentes. Seulement, je ne sait pas quoi modifier pour rendre ces slideshow indépendants. Lorsque je clique sur le bouton "next" et que j'ai fini de faire défiler les images de la première div, ça enchaîne directement avec celles de la deuxième div.
Je vous demande donc de l'aide pour m'aider a adapter mon code JavaScript a mon code HTML pour que les slideshow soient indépendants (sans doutes aussi adapter mon HTML).

Voici le code html des deux slideshow :

 
            <!-- LIVRES -->
        
        <div id="livres">
            <div class="slideshow-container-l">

                <div class="mySlides fade">
                    <img src="Image-slides/GOT.jpg" style="width:100%">
                </div>

                <div class="mySlides fade">
                    <img src="Image-slides/plagueis.jpg" style="width:100%">
                </div>

                <div class="mySlides fade">
                    <img src="Image-slides/yakuza%20(1).jpg" style="width:100%">
                </div>

                <a class="prevl" onclick="plusSlides(-1)">&#10094;</a>
                <a class="nextl" onclick="plusSlides(1)">&#10095;</a>
                
            </div>
           
        </div>
 
                <!-- FILMS -->
    
        <div id="films">
            <div class="slideshow-container-f">

                <div class="mySlides fade">
                    <img src="Image-slides/starwars3.jpg" style="width:100%">
                </div>

                <div class="mySlides fade">
                    <img src="Image-slides/LOTR3%20(2).jpg" style="width:100%">
                </div>

                <div class="mySlides fade">
                    <img src="" style="width:100%">
                </div>

                <a class="prevf" onclick="plusSlides(-1)">&#10094;</a>
                <a class="nextf" onclick="plusSlides(1)">&#10095;</a>
                
            </div>

voici maintenant le code JavaScript qui marche sur tout les slideshow :

 
   <script>
        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("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>

Enfaite, j'ai un problème pour rendre indépendants mes slideshows au niveau des boutons "next" et "perv" qui s'appliquent a tous les slideshows et pas juste a celui de leur div.
J’espère que l'on pourras m'aider, merci d'avance

Et l'eau,

une petite piste :
Pour chaque slider, lorsque j'appuie/clique sur un des bouton de ce dernier, je manipule ce slider.
Modifié par niuxe (19 Nov 2019 - 08:41)