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!

Please visit the [help], take the [tour] to see what and [ask]. Do some research - [search SO for answers](https://www.google.com/search?q=javascript+multiple+slideshows+one+page+site%3Astackoverflow.com). If you get stuck, post a [mcve] of your attempt, noting input and expected output using the [\[<>\]](https://meta.stackoverflow.com/questions/358992/ive-been-told-to-create-a-runnable-example-with-stack-snippets-how-do-i-do) snippet editor. — mplungjan, Jul 05 '23 at 08:27
Please visit [this help page](https://meta.stackexchange.com/questions/5234/how-does-accepting-an-answer-work) — mplungjan, Jul 05 '23 at 12:26

score 1 · Accepted Answer · answered Jul 05 '23 at 08:40

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>

score 0 · Answer 2 · answered Jul 05 '23 at 08:41

The current advice regarding research your question still stands, but this is also a quick fix (but dirty I will not make it more detailed than required to get your working).

Your second blogpost rename it to a new slide as currently your one Js function calls both at the same time, you can make something more creative but for now, this will get you working and with code you can understand.

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

In you Js Add a second function to handle the second div.

// Image Slider
var current = 0,
    slides2 = document.getElementsByClassName("slide2");

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

Now this is poor programming and you really want to enable your js function to handle multiple slides on the same page with different names. But hopefully this will get you working for now.

@user21951736 use the answer below from mplungjan :) its so much better ;) — Andy Donegan, Jul 05 '23 at 08:43
Thanks so much for all of your replies and your help! I tried it with mplungjan s Version and it worked perfectly! I'm so glad i asked my question here! But I'm for sure working on my programming skills Andy Donegan. :) — VRground, Jul 05 '23 at 08:52
@user21951736 great, good luck and remember mark his version as the correct answer so it closes this question as completed. Welcome to Stack Overflow ! — Andy Donegan, Jul 05 '23 at 12:21

Image Slide affects every element with the same class

2 Answers2