Image Slide affects every element with the same class

Question

I found a simple image slider script that I use on my web blog.

The HTML structure looks like this:

<div class="blog"> <!-- Blogpost with its own image slider -->      
     <p>Text</p>
     <div class="slider">
    <img class="slide" src="images/image1.jpg" alt="">
    <img class="slide" src="images/image2.jpg" alt="">
    <img class="slide" src="images/image3.jpg" alt="">
    <img class="slide" src="images/image4.jpg" alt="">
     </div>
</div>

<div class="blog"> <!-- another blogpost with its own image slider -->              
     <p>Text</p>
     <div class="slider">
    <img class="slide" src="images/image5.jpg" alt="">
    <img class="slide" src="images/image6.jpg" alt="">
    <img class="slide" src="images/image7.jpg" alt="">
    <img class="slide" src="images/image8.jpg" alt="">
     </div>
</div>

The script below works fine, but only when I use just one slider. As soon as the second comes into play, the images "slide" across both elements (when Image4 stops, we move on to Image5 in the next blog post).

// Image Slider
var current = 0,
    slides = document.getElementsByClassName("slide");

setInterval(function() {
  for (var i = 0; i < slides.length; i++) {
    slides[i].style.opacity = 0;
  }
  current = (current != slides.length - 1) ? current + 1 : 0;
  slides[current].style.opacity = 1;
}, 5000);

Actually, each slider in a blog post should "run on its own", that is, parallel to each other and not one after the other. What i want is like a carousel for each blogpost and not a carousel for all blogposts.

Unfortunately, my knowledge of JavaScript isn't good enough for me to solve the problem myself, so I'm looking for help and a solution here.

The question can also be deleted at any time if I violate the guidelines. If this is the case, I sincerely apologize.

Thank you so much!

Answer 1

Here is one using the sliders to hold each counter

const sliders = document.querySelectorAll(".slider");
sliders.forEach(slider => {
  slider.dataset.current = 0;
  slider.dataset.max = slider.querySelectorAll('img').length;
});  
  
let tId = setInterval(() => {
  sliders.forEach(slider => {
    let current = +slider.dataset.current;
    let max = +slider.dataset.max;
    current++;
    if (current >= max) current = 0;
    slider.dataset.current = current;  // save it
    slider.querySelectorAll("img").forEach((slide,i) => {
      slide.hidden = i!==current; // or use slide.classList.toggle("visible",i===current) if you have a class
    });
  })
}, 5000);

<div class="blog">
    <!-- Blogpost with its own image slider -->
    <p>Text</p>
    <div class="slider">
      <img class="slide" src="images/image1.jpg" alt="img1">
      <img class="slide" src="images/image2.jpg" alt="img2" hidden>
      <img class="slide" src="images/image3.jpg" alt="img3" hidden>
      <img class="slide" src="images/image4.jpg" alt="img4" hidden>
    </div>
  </div>

  <div class="blog">
    <!-- another blogpost with its own image slider -->
    <p>Text</p>
    <div class="slider">
      <img class="slide" src="images/image5.jpg" alt="img5">
      <img class="slide" src="images/image6.jpg" alt="img6" hidden>
      <img class="slide" src="images/image7.jpg" alt="img7" hidden>
      <img class="slide" src="images/image8.jpg" alt="img8" hidden>
    </div>
  </div>