Quiero tener dos carruseles de imágenes independientes, apilados uno encima del otro. Pensé que hacer que ambos tuvieran la misma clase haría que ambos funcionaran con el mismo script, pero solo el primero se desplaza. ¿Es por la variable de matriz?
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'); };Aquí está el codepen: https://codepen.io/beseu/pen/RwxebYy
El primero es el único que se desplaza, ya que es el que devuelve document.querySelector('.carousel_track'); . querySelector solo devolverá la primera coincidencia ( null si no se encuentra ninguna coincidencia). Consulte https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector para obtener más información.
Puede modificar un poco las cosas usando querySelectorAll ( https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll ) para obtener todos los elementos coincidentes. Con el HTML provisto en CodePen, puede consultar todos los carruseles con .carousel y configurar cada uno usando la mayoría de su JS existente. Aquí hay un ejemplo: https://codepen.io/brianmarco/pen/WNdaNov .