Image Slider mit Java Script

[VRG]

Hallo zusammen!

Ich habe ein Script für einen Fade-In, Fade-Out Image-Slider (siehe unten)
Es war so gedacht, dass in einem Blogbeitrag neben dem Text mehrere Images durchlaufen können, aber quasi nicht mehr als eine Bildgröße Platz in Anspruch genommen wird (hoffe, das ist so verständlich?)

Das Script funktioniert an sich einwandfrei (ich habe es so ähnlich im Internet gefunden), doch nun passiert Folgendes, wenn ich innerhalb meiner Blog-Struktur einen weiteren Slider platziere: Der Slider teilt sich auf die beiden Elemente auf und einmal sliden die Bilder im ersten Blog und einmal im zweiten.

Meine HTML Struktur sieht so aus:

Code:

<div class="container">

    <div class="blog">

         <div class="right">
               <div class="slider">
                     <div class="slides">
                            <div class="slide">
                                  <img src="images/bild1.jpg" alt="" title="">
                            </div>
                            <div class="slide">
                                  <img src="images/bild2.jpg" alt="" title="">
                             </div>
                            <div class="slide">
                                 <img src="images/bild3.jpg"  alt="" title="">
                            </div>
                            <div class="slide">
                                 <img src="images/bild4.jpg" alt="" title="">
                            </div>
                        </div><!-- slides Ende -->
                  </div><!-- slider Ende -->
             </div> <!-- right Ende -->

             <div class="left">
                 <p>Text</p>
             </div>

     </div> <!--- blog Ende --->


     <div class="blog">

         <div class="right">
               <div class="slider">
                     <div class="slides">
                            <div class="slide">
                                  <img src="images/bild5.jpg" alt="" title="">
                            </div>
                            <div class="slide">
                                  <img src="images/bild6.jpg" alt="" title="">
                             </div>
                            <div class="slide">
                                 <img src="images/bild7.jpg"  alt="" title="">
                            </div>
                            <div class="slide">
                                 <img src="images/bild8.jpg" alt="" title="">
                            </div>
                        </div><!-- slides Ende -->
                  </div><!-- slider Ende -->
             </div> <!-- right Ende -->

             <div class="left">
                 <p>Text</p>
             </div>

     </div> <!--- blog Ende --->




</div> <!-- container Ende -->

Das Script für den Image Slider sieht folgendermaßen aus:

Code:

let slides = document.querySelector(".slides");
let imgslides = document.querySelectorAll(".slide");
let previous = document.querySelector("#previous");
let next = document.querySelector("#next");
let timeout = 5500;
let current = -1;

let slider = setTimeout(fadeNextSlide, timeout);

function fadeNextSlide() {
  for (let i = 0; i < imgslides.length; i++) {
    imgslides[i].style.opacity = 0;
  }

  if (current !== imgslides.length - 1) {
    current++;
  } else {
    current = 0;
  }
  imgslides[current].style.opacity = 1;
  slider = setTimeout(fadeNextSlide, timeout);
}

next.addEventListener("click", function () {
  clearTimeout(slider);
  fadeNextSlide();
});

function fadePrevSlide() {
  for (let i = 0; i < imgslides.length; i++) {
    imgslides[i].style.opacity = 0;
  }
  if (current == 0) {
    current = imgslides.length - 1;
  } else {
    current--;
  }
  imgslides[current].style.opacity = 1;
  slider = setTimeout(fadeNextSlide, timeout);
}

previous.addEventListener("click", function () {
  clearTimeout(slider);
  fadePrevSlide();
});

Ich wüsste gerne, was ich an dem Script ändern muss, damit jeder Slider für jeden Blogartikel einzeln steht (also damit in Beitrag 1 der Slider für sich durchläuft und in Slider 2 der Slider für sich durchläuft)?


Leider bin ich Anfänger auf diesem Gebiet und würde mich über professionelles Feedback freuen.

Vielen Dank!


LG

VRG

[Sempervivum]

Normaler Weise bin ich nicht so sehr dafür, das Rad neu zu erfinden aber in diesem Fall wäre es ein wenig Overkill, hier ein ausgewachsenes Slider-Skript einzusetzen. Und dein Skript abzuändern ist relativ einfach: Die Aktionen für einen Slider in eine Funktion packen:

Code:

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Multiple Image Slider</title>
    <style>
         div.slides {
            display: grid;
        }

        figure.slide {
            /* Wir legen alle Slides in die selbe Zelle des Grid,
            damit sie übereinander liegen */
            grid-row: 1/2;
            grid-column: 1/2;
            transition: opacity 0.5s;
        }
    </style>
</head>

<body>
    <div class="container">

        <div class="blog">

            <div class="right">
                <div class="slider">
                    <div class="slides">
                        <figure class="slide">
                            <img src="images/bild1.jpg" alt="" title="">
                        </figure>
                        <figure class="slide">
                            <img src="images/bild2.jpg" alt="" title="">
                        </figure>
                        <figure class="slide">
                            <img src="images/bild3.jpg" alt="" title="">
                        </figure>
                    </div><!-- slides Ende -->
                </div><!-- slider Ende -->
            </div> <!-- right Ende -->

            <div class="left">
                <p>Text</p>
            </div>

        </div> <!--- blog Ende --->


        <div class="blog">

            <div class="right">
                <div class="slider">
                    <div class="slides">
                        <figure class="slide">
                            <img src="images/dia0.jpg" alt="" title="">
                        </figure>
                        <figure class="slide">
                            <img src="images/dia1.jpg" alt="" title="">
                        </figure>
                        <figure class="slide">
                            <img src="images/dia2.jpg" alt="" title="">
                        </figure>
                        <figure class="slide">
                            <img src="images/dia3.jpg" alt="" title="">
                        </figure>
                    </div><!-- slides Ende -->
                </div><!-- slider Ende -->
            </div> <!-- right Ende -->

            <div class="left">
                <p>Text</p>
            </div>
        </div> <!--- blog Ende --->
    </div> <!-- container Ende -->
    <script>
        const timeout = 5000;
        // Damit die einzelnen Slideshows getrennt verarbeitet werden
        // legen wir den Code dafür in eine Funktion
        function makeSlider(slider) {
            const
                // Alle Slides bereit stellen
                imgslides = slider.querySelectorAll(".slide"),
                // HTML für die Navigation bereit stellen
                nav = `
                <div>
                    <span class="prev">Previous</span>
                    <span class="next">Next</span>
                </div`;
            // ... und in Container am Ende eintragen
            slider.insertAdjacentHTML('beforeend', nav);
            const
                // Previous- und Next-Button bereit stellen
                previous = slider.querySelector(".prev"),
                next = slider.querySelector(".next");
            let current = -1;

            let sliderTimer = setTimeout(fadeNextSlide, timeout);

            function fadeNextSlide() {
                for (let i = 0; i < imgslides.length; i++) {
                    imgslides[i].style.opacity = 0;
                }

                if (current !== imgslides.length - 1) {
                    current++;
                } else {
                    current = 0;
                }
                imgslides[current].style.opacity = 1;
                sliderTimer = setTimeout(fadeNextSlide, timeout);
            }

            next.addEventListener("click", function () {
                clearTimeout(sliderTimer);
                fadeNextSlide();
            });

            function fadePrevSlide() {
                for (let i = 0; i < imgslides.length; i++) {
                    imgslides[i].style.opacity = 0;
                }
                if (current == 0) {
                    current = imgslides.length - 1;
                } else {
                    current--;
                }
                imgslides[current].style.opacity = 1;
                sliderTimer = setTimeout(fadeNextSlide, timeout);
            }

            previous.addEventListener("click", function () {
                clearTimeout(sliderTimer);
                fadePrevSlide();
            });
        }
        // Alle Slider bereit stellen
        sliders = document.querySelectorAll(".slider");
        // ... und für jeden die Slideshow erzeugen
        sliders.forEach(slider => makeSlider(slider));
    </script>
</body>

</html>

 
Anders als bei der konventionellen Methode mit absoluter Positionierung habe ich hier die Slides mit Gridlayout übereinander gelegt. Und die Prev- und Next-Buttons fügt das Skript ein, Du brauchst diese nicht ins HTML zu schreiben.

[Sempervivum]

Aaaarg! 
https://forum.selfhtml.org/self/2023/jul...2#m1809562
Dann war meine Mühe wohl vergebens. Typische Situation beim Crossposting: Ist eine Lösung erst gefunden, interessierst sich der Poster nicht mehr für die anderen Foren wo er seine Frage ebenfalls unter gebracht hatte.
Sehr ärgerlich!