Así que tengo esta tarea de mostrar constantemente 4 logotipos, luego 4 logotipos y luego 3 logotipos con un intervalo de 6 segundos entre ellos. Hice una función que muestra la primera parte de los 4 logotipos de la matriz de logotipos. ¿Necesito llamar a la función 3 veces con la matriz diff como argumento? ¿Cuál es la forma correcta de hacerlo?
let logos = [ { id: 1, img: "./img/apple.png", }, { id: 2, img: "./img/instagram.jpg", }, { id: 3, img: "./img/github.png", }, { id: 4, img: "./img/google.png", }, { id: 5, img: "./img/lyft.png", }, { id: 6, img: "./img/paypal.png", }, { id: 7, img: "./img/ripple.png", }, { id: 8, img: "./img/spotify.png", }, { id: 9, img: "./img/tesla.png", }, { id: 10, img: "./img/uber.png", }, { id: 11, img: "./img/youtube.png", }, ]; //DOM const imageWrapper = document.querySelector('.logos-wrapper') // const logo = document.createElement('div'); const firstArr = logos // .map(logo => logo.img) .slice(0, 4); console.log(firstArr); const secondArr = logos.slice(4, 8); console.log(secondArr) const thirdArr = logos.slice(8, 11); console.log(thirdArr) function showLogos(firstArr) { for (let logo in firstArr) { imageWrapper.innerHTML += `<div class="col-3 mb-3 logo-item"> <img src="${firstArr[logo].img}"/> </div>` } } showLogos(firstArr) showLogos(secondArr) showLogos(thirdArr)PD: Es una ventaja si después de cada ciclo de 4-4-3 se barajan
Se agregó la parte css y html solo para mostrar el resultado, puede descartarlos
let logos = [{ id: 1, img: "https://picsum.photos/400/250?random=1&lock=1", }, { id: 2, img: "https://picsum.photos/400/250?random=2&lock=2", }, { id: 3, img: "https://picsum.photos/400/250?random=3&lock=3", }, { id: 4, img: "https://picsum.photos/400/250?random=4&lock=4", }, { id: 5, img: "https://picsum.photos/400/250?random=5&lock=5", }, { id: 6, img: "https://picsum.photos/400/250?random=6&lock=6", }, { id: 7, img: "https://picsum.photos/400/250?random=7&lock=7", }, { id: 8, img: "https://picsum.photos/400/250?random=8&lock=8", }, { id: 9, img: "https://picsum.photos/400/250?random=9&lock=9", }, { id: 10, img: "https://picsum.photos/400/250?random=10&lock=0", }, { id: 11, img: "https://picsum.photos/400/250?random=11&lock=1", }, ]; function showLogos(array) { const imageWrapper = document.querySelector(".logos-wrapper"); // slices the array into chunks with 4 children const chunkSize = 4; const chunkedArray = []; for (let i = 0; i < array.length; i += chunkSize) { const chunk = array.slice(i, i + chunkSize); chunkedArray.push(chunk); } // changes the visible chunk in ".logos-wrapper" function setChunk(array) { imageWrapper.innerHTML = ""; array.forEach((logo) => { imageWrapper.innerHTML += `<div class="col-3 mb-3 logo-item"><img src="${logo.img}"/></div>`; }); } // runs once on start to show the first chunk setChunk(chunkedArray[0]); // runs setChunk function every 6s and updates the content let currentChunk = 0; function changeChunk() { ++currentChunk; if (currentChunk >= chunkedArray.length) currentChunk = 0; setChunk(chunkedArray[currentChunk]); } let loop = setInterval(changeChunk, 6000); } showLogos(logos); body { margin: 0; padding: 0; display: flex; align-items: center; justify-content: center; width: 100vw; height: 100vh; } .logos-wrapper { display: grid; grid-template-columns: repeat(2, 1fr); } .logo-item { height: 200px; box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px; margin: 15px; border-radius: 25px; overflow: hidden; opacity: 1; animation: fadeIn 0.5s ease; } @keyframes fadeIn { from { transform: scale(0); } to { transform: scale(1); } } img { width: 100%; height: 100%; background-position: center; object-fit: cover; } <div class="logos-wrapper"> </div>