Multiple vanilla JS carousels running on same script

I want to have two independent image carousels, stacked on top of each other. I thought making both of them with the same class would make them both work from the same script - but only the first one scrolls. Is it because of the array variable?

window.onload = function(){
    var track = document.querySelector('.carousel_track');
    var slides = Array.from(track.children);

function setSlidePosition (slide, index) {
    slide.style.left = slideSize * index + 'px';
};
slides.forEach(setSlidePosition);

function moveToSlide (track, currentSlide, targetSlide){
    track.style.transform = 'translateX(-' + targetSlide.style.left + ')';
    currentSlide.classList.remove('current-slide');
    targetSlide.classList.add('current-slide');
};

Here is the codepen: https://codepen.io/beseu/pen/RwxebYy

1 answer

How many English words
do you know?
Test your English vocabulary size, and measure
how many words do you know
Online Test
Powered by Examplum