So i have this task to constantly show 4 logos then 4 logos then 3 logos with 6 seconds interval between them. I made a function that shows first chunk of the 4 logos of the logos array. DO I need to call the function 3 times with diff array as an argument? What is the right way to do it ?
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)
PS: It's a bonus if after every cycle of 4-4-3 they are shuffled
Added the css & html part just to show the result ,you may dismiss them
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>