Question 200847 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Image Slide affects every element with the same class

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!

Tags:

2

Answers


  1. 0

    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>
    Login or Signup to reply.
  2. 0

    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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search