Question 311308 in CSS Question posted in
Some basic documentation can be found here.

Css – Issue with multiple javascript slideshows on the same page

I’m trying to make multiple slideshows to work with the same piece of javascript code.

Here is my HTML code:

<div class="slider-container">
    
    <div class="slider">
        <div class="slide">...</div>
        <div class="slide">...</div>
        <div class="slide">...</div>
        <div class="slide">...</div>
    </div>
    
    <div class="slider">
        <div class="slide">...</div>
        <div class="slide">...</div>
        <div class="slide">...</div>
        <div class="slide">...</div>
    </div>

</div>

Here is the main CSS:

.slider-container{
    width:50%;
}
        
.slider{
    width:100%;
    position:relative;
    padding-bottom:75%; /* aspect-ratio 4/3 */
}
        
.slide{
    width:100%;
    position:absolute;
    top:0;
    left:0;
    opacity:0;
    transition:opacity 0.5s ease-in;
}
        
.slide:first-child{
    opacity:1;
}

and here is the javascript :

const sliderContainer = document.querySelector(".slider-container");
const slide = sliderContainer.querySelectorAll(".slide");
let currentSlide = 0;
        
function changeSlide() {
    slide[currentSlide].style.opacity = 0;
    currentSlide = (currentSlide + 1) % slide.length;
    slide[currentSlide].style.opacity = 1;
}
        
function startSlider() {
    intervalId = setInterval(changeSlide, 2000);
}
        
function stopSlider() {
    clearInterval(intervalId);
}
        
startSlider();
sliderContainer.addEventListener("mouseenter", stopSlider);
sliderContainer.addEventListener("mouseleave", startSlider);

This javascript works well for one slideshow but II can’t get more than one to work on the same page. Ideally, I would like to keep the same class for all the slideshows and obviously make the enter/leave mouse events work individualy for each of them. Any help ?

Tags:

2

Answers


  1. 0

    To handle multiple sliders on one page with independent behaviors, you need to change your JS code to work with each slider separately.

    First way to do this is by encapsulating the functionality for each slider within a function and then creating instances for each slider.

    Here is your code:

    html:

    <div class="slider-container">
  <div class="slider" id="slider1">
    <div class="slide">...</div>
    <div class="slide">...</div>
    <div class="slide">...</div>
    <div class="slide">...</div>
  </div>

  <div class="slider" id="slider2">
    <div class="slide">...</div>
    <div class="slide">...</div>
    <div class="slide">...</div>
    <div class="slide">...</div>
  </div>
</div>

    javascript:

    function createSlider(sliderId) {
  const sliderContainer = document.getElementById(sliderId);
  const slides = sliderContainer.querySelectorAll(".slide");
  let currentSlide = 0;
  let intervalId;

  function changeSlide() {
    slides[currentSlide].style.opacity = 0;
    currentSlide = (currentSlide + 1) % slides.length;
    slides[currentSlide].style.opacity = 1;
  }

  function startSlider() {
    intervalId = setInterval(changeSlide, 2000);
  }

  function stopSlider() {
    clearInterval(intervalId);
  }

  startSlider();
  sliderContainer.addEventListener("mouseenter", stopSlider);
  sliderContainer.addEventListener("mouseleave", startSlider);
}

// Create instances for each slider
createSlider("slider1");
createSlider("slider2");

    Changes in the code:

    1. The createSlider function takes the sliderId parameter, who will be used to identify each slider container.
    2. Inside the function, I use document.getElementById to find the specific slider container based on the provided sliderId.
    3. The rest of the logic is encapsulated within the function, ensuring that each slider work independently.

    So, you can create as many sliders as you need by calling createSlider with different sliderId values. Each slider will have it own set of event listeners and will function independently of the others.

    Login or Signup to reply.
  2. 0

    Try this:

    const sliderContainer = document.querySelector(".slider-container");
const slider = sliderContainer.querySelectorAll(".slider");
let intervals = [];

function startSlider() {
  slider.forEach(everySlider => {
    const slides = everySlider.children;
    let count = 0;
    const intervalId = setInterval(() => {
      if(count === slides.length){
        count = 0;
      }
      for(let i=0; i<slides.length; i++){
        slides[i].style.opacity = 0;
      }
      slides[count].style.opacity = 1;
      count++;
    }, 2000);
    intervals.push(intervalId);
  });
}

function stopSlider(){
  intervals.forEach(interval => clearInterval(interval));
}

startSlider();
sliderContainer.addEventListener("mouseenter", stopSlider);
sliderContainer.addEventListener("mouseleave", startSlider);
    .slider-container{
    width:50%;
}
        
.slider{
    width:100%;
    position:relative;
    padding-bottom:75%; /* aspect-ratio 4/3 */
}
        
.slide{
    width:100%;
    position:absolute;
    top:0;
    left:0;
    opacity:0;
    transition:opacity 0.5s ease-in;
}
        
.slide:first-child{
    opacity:1;
}
    <div class="slider-container">
    <div class="slider">
        <div class="slide">1</div>
        <div class="slide">2</div>
        <div class="slide">3</div>
        <div class="slide">4</div>
    </div>
    
    <div class="slider">
        <div class="slide">5</div>
        <div class="slide">6</div>
        <div class="slide">7</div>
        <div class="slide">8</div>
    </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search