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