How can I loop through multiple instances of a JS component

Question

I have written some JS for a custom carousel and would like to be able to use unlimited multiple instances of this on the same page

I am aware of the concept of looping through instances, and a few different ways to do this, but am having some trouble with getting this working as a JS beginner

Example: https://codepen.io/kempster/pen/rNOwMaB

JS:

  var prev  = document.querySelector('.prev');
  var next  = document.querySelector('.next');
  var counter = document.querySelector('.counter');
  var slides = document.querySelectorAll(".slide");
  var currentSlide = 0;

  function prevSlide(){
    slides[currentSlide].className = 'slide';

    if (currentSlide === 0 ) {
      currentSlide = slides.length - 1;
    } else {
      window.currentSlide--;
    }   
    slides[currentSlide].className = 'slide active';
    updateCounter();
    sliderWrapper.style.width = slides[currentSlide].clientWidth + 'px';
    sliderWrapper.style.height = slides[currentSlide].clientHeight + 'px';
  } 

  function nextSlide(){
    slides[currentSlide].className = 'slide';
    window.currentSlide++;
    window.currentSlide %= window.slides.length;
    slides[currentSlide].className = 'slide active';
    updateCounter();
    sliderWrapper.style.width = slides[currentSlide].clientWidth + 'px';
    sliderWrapper.style.height = slides[currentSlide].clientHeight + 'px';
  } 

  window.onload = function load() {
    sliderWrapper.style.width = slides[currentSlide].clientWidth + 'px';
    sliderWrapper.style.height = slides[currentSlide].clientHeight + 'px';
    counter.innerHTML = (currentSlide + 1) + ' / ' + slides.length;
  }

  function updateCounter() {
    counter.innerHTML = (currentSlide + 1) + ' / ' + slides.length;
  }

  prev.addEventListener('click', () => prevSlide());
  next.addEventListener('click', () => nextSlide());

Answer 1

I suppose you identify the different carousels on your HTML with some class or ID. I'd suggest to store somewhere (localStorage, window, whatever fits your needs) an object somewhat like this:

const carousels = [
  {
    id: id
    prev: document.querySelector('.prev');
    next: document.querySelector('.next');
    counter: document.querySelector('.counter');
    slides: document.querySelectorAll(".slide");
    currentSlide: 0;
  },
  {
    // Etc...
  }
];

Or this:

const carousels = {
  1: {
    prev: document.querySelector('.prev');
    next: document.querySelector('.next');
    counter: document.querySelector('.counter');
    slides: document.querySelectorAll(".slide");
    currentSlide: 0;
  },
  2: {
    // Etc...
  }
};

That way you can keep the reference to all the relevant info of all the carousels on a page and inside the events you can check for the ID/class of the carousel triggering the event and use your methods on the correct carousel elements.

You should also make sure to select in each case the relevant slides and buttons and not all of them as you are doing now.

It's a quick solution but I hope it helps.