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
The first one is the only one that is scrolling as that is the one returned from document.querySelector('.carousel_track');. querySelector will only return the first match (null if no match is found). See https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector for further reference.
You could tweak things a bit by using querySelectorAll (https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll) to get all matching elements. With the HTML provided in the CodePen, you could query for all carousels with .carousel, and set each one up using most of your existing JS. Here's an example - https://codepen.io/brianmarco/pen/WNdaNov .