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 ?