Is there a way to loop these 3 functions one by one on interval of 6 seconds?

Question

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