Pick random index and change till all unique are done then restart

here is a simple script. you will need the following

• pool this will contain all possible values you would like
• single function to update the show array

Test Here

I've tried to put as much comments as possible

// Pool with all possible images (you may use any type of text as long as each value is unique)
const pool = [
    "1.png",
    "2.png",
    "3.png",
    "4.png",
    "5.png",
    "6.png",
    "7.png",
    "8.png",
    "9.png",
    "10.png",
];

// this will store the "6" unique elements which you will be displaying
let show = [];
// get the first 6 random but unique elements. we will monitor the length of the `show` array
while(show.length < 6){
    // randomly sort the pool and get the first element of the sorted array and store it into a `pooled` variable.
    let pooled = pool.sort(() => 0.5 - Math.random())[0];
    // check if the pooled value exists in the `show` array if it doesnt then add it and repeat the loop till all 6 slots are filled with unique values
    if(!show.includes(pooled)){
        // add `pooled` item to the `show` array
        show.push(pooled);
    }
}

// do the same as the above with a slight change, of only replacing one till all are unique.
function after5Mins(){
    // get a new random item from the pool
    let newPoolItem = pool.sort(() => 0.5 - Math.random())[0];
    // using a while loop check if the new `pool item` is in the show array, if not then skip and add it
    while(show.includes(newPoolItem)){
        newPoolItem = pool.sort(() => 0.5 - Math.random())[0]; // set the pool item to a random one, then loop and check, follow previous comment
    }  
    // once a new un used item is found, then assign it to a random position
    show[Math.floor(Math.random()*show.length)] = newPoolItem;
}


// call the after 5 mintes using 
setTimeout(()=>{
    after5Mins();
}, 300000);

I have my example fiddle here, but this is the breakdown:

Your data would look something like this:

let galleryPool = [
    {
        "src" : {
            "1x" : "/clients/Logo-1.png",
            "2x" : "/clients/Logo-1@2x.png",
            "3x" : "/clients/tLogo-1@3x.png"
        },
        "alt" : "xyz",
        "color": "red"
    },
    ...
]

(I added a color property so you could see the changes since I don't actually have any images.)

The first thing I do is drop in my handy-dandy Fisher–Yates shuffle, since this is a great way to get a random element out of an array.

Array.prototype.shuffle = function() {
    let currentIndex = this.length,  randomIndex;
  while (currentIndex != 0) {
    randomIndex = Math.floor(Math.random() * currentIndex);
    currentIndex--;
    [this[currentIndex], this[randomIndex]] = [this[randomIndex], this[currentIndex]];
  }

  return this;
}

I initialize the gallery first, and set up the 5-second timeout to change images in the gallery.

let displayedGallery = []
initialGallerySetup();

function initialGallerySetup() {
    let galleryContainer = document.getElementById("gallery-container")
  galleryPool.shuffle()
  displayedGallery = galleryPool.splice(0, 6)
  for(let index = 0; index < displayedGallery.length; index++) {
    let data = displayedGallery[index]
    galleryContainer.appendChild(generateGalleryItem(data))
  }
  galleryTickUpdate()
}

this function makes an img dom element I can then add to the container. I'm using your src here but you can change whatever values in here to alter how all of the images in the gallery are displayed.

function generateGalleryItem(data) {
  let item = document.createElement("img")
  item.style.backgroundColor = data.color
  item.src = data.src[0]
  item.className = "gallery-item"
  return item
}

This function calls itself every 5 seconds, and will pick a random item from the gallery to swap with another item not currently displayed.

function galleryTickUpdate() {
  setTimeout(() => {
    let randomIndex = Math.floor(displayedGallery.length * Math.random())
    swapItemAtIndex(randomIndex)
    galleryTickUpdate()
  },5000)
}

Here's the magic. I grab the randomly chosen item out of the displayed gallery items, pick a new item from the unused gallery pool items, put the old one back in the pool and the new one gets pushed back into the gallery display in the same spot.

function swapItemAtIndex(index) {
    let galleryContainer = document.getElementById("gallery-container")
    let displaySlot = galleryContainer.children[index]
    let returning = displayedGallery[index]
    galleryPool.shuffle()
    let newDisplay = galleryPool.pop();
    displayedGallery[index] = newDisplay
    galleryPool.push(returning)
    galleryContainer.insertBefore(generateGalleryItem(newDisplay), displaySlot)
    galleryContainer.removeChild(displaySlot)
}

If you want to enforce running through the whole array, just check when the galleryPool array is empty, then repopulate it and re-run the init function. Otherwise, this will happily run forever.