How to target a specific slider using javascript when there is more than one

Question

I have 3 sliders on my page I'm a building but i am just curious to know the best way to go about targeting only the active one so the javascript below would work for all of them. Everything seems to work fine if i disable the other 2 sliders. First time I have done something like this. I'm guessing my javascript selectors may need to change some what to get it to work.

Appreciate any advice on the best way forward.

 var sliderSlide = document.querySelectorAll('.slider__slide'); var nextSlide = document.querySelector('.slider__button--next'); var previousSlide = document.querySelector('.slider__button--previous'); var currentSlide = 0; var currentSlideImg = 0; //Reset slides function resetSlides() { for (var s = 0; s < sliderSlide.length; s++) { sliderSlide[s].classList.remove('active'); } for (var i = 0; i < sliderSlideImg.length; i++) { sliderSlideImg[i].classList.remove('active'); } } //Start slides function startSlide() { resetSlides(); sliderSlide[0].classList.add('active'); sliderSlideImg[0].classList.add('active'); } //Previous slide function slidePrevious() { resetSlides(); sliderSlide[currentSlide - 1].classList.add('active'); currentSlide--; sliderSlideImg[currentSlideImg - 1].classList.add('active'); currentSlideImg--; } previousSlide.addEventListener('click', function() { if (currentSlide === 0 && currentSlideImg === 0) { currentSlide = sliderSlide.length; currentSlideImg = sliderSlideImg.length; } slidePrevious(); }); //Next slide function slideNext() { resetSlides(); sliderSlide[currentSlide + 1].classList.add('active'); currentSlide++; sliderSlideImg[currentSlideImg + 1].classList.add('active'); currentSlideImg++; } nextSlide.addEventListener('click', function() { if (currentSlide === sliderSlide.length - 1 && currentSlideImg === sliderSlideImg.length - 1) { currentSlide = -1; currentSlideImg = -1; } slideNext(); }); 

 <div class="slider slider--1 active"> <div class="slider__slide"> <p class="slider__text">some text</p> </div> <div class="slider__slide"> <p class="slider__text">some text</p> </div> <div class="slider__slide"> <p class="slider__text">some text</p> </div> <div class="slider__buttons"> <span class="slider__button--previous">Previous</span> <span class="slider__button--next">Next</span> </div> </div> <div class="slider slider--2"> <div class="slider__slide"> <p class="slider__text">some text</p> </div> <div class="slider__slide"> <p class="slider__text">some text</p> </div> <div class="slider__slide"> <p class="slider__text">some text</p> </div> <div class="slider__buttons"> <span class="slider__button--previous">Previous</span> <span class="slider__button--next">Next</span> </div> </div> <div class="slider slider--3"> <div class="slider__slide"> <p class="slider__text">some text</p> </div> <div class="slider__slide"> <p class="slider__text">some text</p> </div> <div class="slider__slide"> <p class="slider__text">some text</p> </div> <div class="slider__buttons"> <span class="slider__button--previous">Previous</span> <span class="slider__button--next">Next</span> </div> </div> 

Answer 1

You can create loop over .slider and then use querySelector on each item, that way you will have variables for each slider

Array.from(document.querySelectorAll('.slider')).forEach(function(slider) {
    var sliderSlide = slider.querySelectorAll('.slider__slide');
    var nextSlide = slider.querySelector('.slider__buttons--next');
    var previousSlide = slider.querySelector('.slider__buttons--previous');
    ...
});

or if you prefer for loop:

var sliders = document.querySelectorAll('.slider');
for (var i = 0; i < sliders.length; ++i) {
   var slider = sliders[i];
   ...
}

Answer 2

document.querySelector('.slider--3 .slider__slide')

但我建议将ID放在您的滑块上，然后选择

document.querySelector('#slider--3')