Random image picker changing every 5 seconds with non repeating images in a row - ready for Your comments

JavaScript
#1

Dear friends, I have made (with a help of You) a random image picker choosing 4 images from an image collection. The idea of this little project is that there are not duplicated images in a row - so there can be only ABCD not ABBC. The second condition is that the set of images changes after some time eg every 5 seconds.

The project can be used for example to present a list of clients on a webpage. Of course feel free to use it.

BUT maybe there is a better way to write it, so please feel free to comment it or to correct it. I personally wanted to make it with the loop and if statement but I had some problems with “if” the images kept repeating in a row like ABBC.

and the code:

var clients = [
  { 
   logo: 'https://cdn.glitch.com/9e10365b-c704-4f66-b12a-f002faf03af3%2FMbank-logo.jpg?1557398130183'
  },

  {
    logo: "https://cdn.glitch.com/9e10365b-c704-4f66-b12a-f002faf03af3%2Fnetia-logo.png?1557398130339"
  },
  {
    logo: "https://cdn.glitch.com/9e10365b-c704-4f66-b12a-f002faf03af3%2Ffines_logo.jpg?1557398130199"
  },
  { 
    logo: "https://cdn.glitch.com/9e10365b-c704-4f66-b12a-f002faf03af3%2Fsevenet_logo.jpg?1557398130497"
  },
  {
    logo: "https://cdn.glitch.com/9e10365b-c704-4f66-b12a-f002faf03af3%2FMcDonalds_logo.png?1557398130570"
  }
];

function repeatImage(){

let result = clients.slice(0, 4).map(function () { 
        return this.splice(Math.floor(Math.random() * this.length), 1)[0];
    }, clients.slice());


      var firstOnScreen = result[0];
      document.getElementById("firstSlideImage").src = firstOnScreen.logo;

      var secondOnScreen = result[1];
      document.getElementById("secondSlideImage").src = secondOnScreen.logo;

      var thirdOnScreen = result[2];
      document.getElementById("thirdSlideImage").src = thirdOnScreen.logo;

      var fourthOnScreen = result[3];
      document.getElementById("fourthSlideImage").src = fourthOnScreen.logo;
};

setInterval( repeatImage, 2000);

window.onload = function() {
  repeatImage()
};

regards hubert

#2

Hello @hubkubas,

If you want to repeat an action every five seconds, you should use the setInterval() method to call the appropriate function.

2 Likes
#3

Yes I know thank You but how to make it with the above function, I have been trying and it’s not working. Can You help me, please. this is the code: https://glitch.com/edit/#!/clients-slider?path=script.js:41:29

regards Hubert

#4

What is the specific problem you are facing and what have you tried?

A couple of quick comments.

  1. Has result been declared previously? Looks like you are missing let or const.
  2. You should be using an arrow function for the map, to retain the context of this. To learn more about arrow functions and this, here is a medium article.
1 Like
#5

I give up for today have no idea how to make it repeat every 5 seconds, all my tries don’t work. Good night and thank You :slight_smile:

#6

If you want to call a function every 5 seconds, you first need to define a function to call. Just wrap the code you have written in a function (maybe name it replaceImages) and then use setInterval to call it every 5 seconds.

setInterval(replaceImages, 5000);
2 Likes
#7

I must have had a kind of blackout, thank You very much for Your patience and that You wanted just to waste Your time. Of course it was extremely easy.

Regards, Hubert

#8