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 >
    <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

CodePudding user response：

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 ><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 > </div>