Estoy tratando de hacer que mi carrusel se reproduzca automáticamente usando la función setInterval, pero no he tenido suerte.
Intenté llamar a la función de carrusel en la función setInterval al final, pero no funciona... ¿qué hice mal?
Aquí está la caja de arena https://codesandbox.io/s/slider-7ph05?file=/src/index.js
Aquí está mi código JS:
const slides = document.querySelectorAll(".slide"); const prevBtn = document.querySelector(".prevBtn"); const nextBtn = document.querySelector(".nextBtn"); // Inline callback function // forEach(function(element, index, array){ ... }) slides.forEach(function (slide, index) { slide.style.left = `${index * 100}%`; // console.log(slide); // console.log(index); // console.log(array); }); let count = 0; nextBtn.addEventListener("click", function () { count++; carousel(); }); prevBtn.addEventListener("click", function () { count--; carousel(); }); function carousel() { slides.forEach(function (slide) { if (count > slides.length - 1) { count = 0; } if (count < 0) { count = slides.length - 1; } slide.style.transform = `translateX(-${count * 100}%)`; // console.log(slides.length); // console.log(slide); // console.log(count); }); } setInterval(carousel, 3000);No parece estar incrementando la variable de count en setInterval ni invocando la función de carousel como lo hace, cuando se presiona el botón siguiente o anterior. Actualice su setInterval para incrementar el contador e invocar la función de carousel .
setInterval(()=>{ count++ //increment the counter carousel() //call the function }, 3000);Su archivo de índice debería verse así:
const slides = document.querySelectorAll(".slide"); const prevBtn = document.querySelector(".prevBtn"); const nextBtn = document.querySelector(".nextBtn"); // Inline callback function // forEach(function(element, index, array){ ... }) slides.forEach(function (slide, index) { slide.style.left = `${index * 100}%`; // console.log(slide); // console.log(index); // console.log(array); }); let count = 0; nextBtn.addEventListener("click", function () { count++; carousel(); }); prevBtn.addEventListener("click", function () { count--; carousel(); }); function carousel() { slides.forEach(function (slide) { if (count > slides.length - 1) { count = 0; } if (count < 0) { count = slides.length - 1; } slide.style.transform = `translateX(-${count * 100}%)`; // console.log(slides.length); // console.log(slide); // console.log(count); }); } setInterval(()=>{ count++ carousel() }, 3000);