Swapping mutlidimensional arrays every 5 seconds in Javascript

May 1, 2022

I have made 2 multidimensional arrays with a push for data insertion, and I would like to have the 1st array shown when I open the page, and then have the 2 of them swap every 5 seconds.

Both of them show 3 pictures with some info under them, and I want the 1st one to appear, after 5 seconds, it disappears, and the second one appears, and after 5 seconds it happens again, like a loop. Any ideas?

<html>

<head>
  <title>Galerija</title>
  <style>
    #container {
      position: relative;
      display: grid;
      align-content: center;
      padding-left: 210px;
      flex-direction: column;
      height: 98vh;
      width: 98vw;
      grid-template-columns: 1fr 1fr 1fr 1fr;
      grid-gap: 6vh;
    }
    
    img {
      height: 600px;
    }
  </style>

</head>

<body>

  <div id="container">

  </div>


  <script>
    let container = document.querySelector("#container");
    let slikeniz = [];
    let slikeniz2 = [];

    function slike(slika, brslike, autor, cena) {
      this.slika = slika;
      this.brslike = brslike;
      this.autor = autor;
      this.cena = cena;
    };

    slikeniz.push(new slike("https://i.pinimg.com/736x/90/7f/f7/907ff7b31d7de2f5430cfee79ded14d2.jpg", "slika1", "nekitamo", "200e"));
    slikeniz.push(new slike("https://archziner.com/wp-content/uploads/2020/01/abstract-painting-ideas-woman-with-hair-in-a-bun-dancing-flamenco-with-lon-red-skirt-blue-top.jpg", "slika2", "nekitamo2", "500e"));
    slikeniz.push(new slike("https://s3.amazonaws.com/showflipper/product/69601536314088.jpg", "slika3", "nekitamo3", "1000e"));

    slikeniz.forEach(t => {
      container.innerHTML += "<div class = 'item'><img src = " + t.slika + ">" +
        "<h1>" + t.brslike + " " + t.autor + "</h1>" +
        "<h2>" + t.cena + "</h2>"
      "</div>"
    });


    //----------------------------------------------------------------------------------

    function slike2(slika2, brslike2, autor2, cena2) {
      this.slika2 = slika2;
      this.brslike2 = brslike2;
      this.autor2 = autor2;
      this.cena2 = cena2;
    };

    slikeniz2.push(new slike2("https://3.imimg.com/data3/VO/EN/MY-787774/power-of-nature-500x500.jpg", "slika1", "nekitamo", "400e"));
    slikeniz2.push(new slike2("https://cdna.artstation.com/p/assets/images/images/030/002/140/large/tara-pogancev-lake2.jpg?1599291124&dl=1", "slika2", "nekitamo2", "1500e"));
    slikeniz2.push(new slike2("https://joanabrown.art/wp-content/uploads/2019/11/sierra_h_waitingongod-book_post-img-445x555.jpg", "slika3", "nekitamo3", "1300e"));

    slikeniz2.forEach(t => {
      container.innerHTML += "<div class = 'item'><img src = " + t.slika2 + ">" +
        "<h1>" + t.brslike2 + " " + t.autor2 + "</h1>" +
        "<h2>" + t.cena2 + "</h2>"
      "</div>"
    });
  </script>

</body>

</html>

>Solution :

Presented below is one possible way to achieve the desired objective.

Code Snippet

let container = document.querySelector("#container");
let slikeniz = [];
let slikeniz2 = [];
let showNow = 1, counter = 0;   // flag to toggle, counter to stop
const threshold = 50; // stop after 50 toggles, for demo

function slike(slika, brslike, autor, cena) {
  this.slika = slika;
  this.brslike = brslike;
  this.autor = autor;
  this.cena = cena;
};

slikeniz.push(new slike("https://i.pinimg.com/736x/90/7f/f7/907ff7b31d7de2f5430cfee79ded14d2.jpg", "slika1", "nekitamo", "200e"));
slikeniz.push(new slike("https://archziner.com/wp-content/uploads/2020/01/abstract-painting-ideas-woman-with-hair-in-a-bun-dancing-flamenco-with-lon-red-skirt-blue-top.jpg", "slika2", "nekitamo2", "500e"));
slikeniz.push(new slike("https://s3.amazonaws.com/showflipper/product/69601536314088.jpg", "slika3", "nekitamo3", "1000e"));

// method to render the first set of images
const show1 = () => (
  container.innerHTML = '',
  slikeniz.forEach(t => {
    container.innerHTML += "<div class = 'item'><img src = " + t.slika + ">" +
      "<h1>" + t.brslike + " " + t.autor + "</h1>" +
      "<h2>" + t.cena + "</h2>"
    "</div>"
  })
);


//----------------------------------------------------------------------------------

function slike2(slika2, brslike2, autor2, cena2) {
  this.slika2 = slika2;
  this.brslike2 = brslike2;
  this.autor2 = autor2;
  this.cena2 = cena2;
};

slikeniz2.push(new slike2("https://3.imimg.com/data3/VO/EN/MY-787774/power-of-nature-500x500.jpg", "slika1", "nekitamo", "400e"));
slikeniz2.push(new slike2("https://cdna.artstation.com/p/assets/images/images/030/002/140/large/tara-pogancev-lake2.jpg?1599291124&dl=1", "slika2", "nekitamo2", "1500e"));
slikeniz2.push(new slike2("https://joanabrown.art/wp-content/uploads/2019/11/sierra_h_waitingongod-book_post-img-445x555.jpg", "slika3", "nekitamo3", "1300e"));

// method to render the first set of images
const show2 = () => (
  container.innerHTML = '',
  slikeniz2.forEach(t => {
    container.innerHTML += "<div class = 'item'><img src = " + t.slika2 + ">" +
      "<h1>" + t.brslike2 + " " + t.autor2 + "</h1>" +
      "<h2>" + t.cena2 + "</h2>"
    "</div>"
  })
);

// method to toggle between the two sets
const toggleSlikeniz = () => {
  const id = setTimeout(() => {
    if (showNow === 1) {
      // if flag says to show images in set-1
      // toggle the flag & invoke "show1()"
      showNow = 2;
      show1();
    } else {
      // else (flag says 2, so) show images in set-2
      // toggle the flag & invoke "show2()"
      showNow = 1;
      show2();
    };
    // a sanity-checking for demo only
    // stop recursive call if counter >= threshold (ie, 50)
    if (counter++ < threshold) toggleSlikeniz();
  }, 3500);
  
  // clear the timeout
  return () => clearTimeout(id);
};

// invoke the toggle method to begin rendering
toggleSlikeniz();

<html>

<head>
  <title>Galerija</title>
  <style>
    #container {
      position: relative;
      display: grid;
      align-content: center;
      padding-left: 210px;
      flex-direction: column;
      height: 98vh;
      width: 98vw;
      grid-template-columns: 1fr 1fr 1fr 1fr;
      grid-gap: 6vh;
    }
    
    img {
      height: 600px;
    }
  </style>

</head>

<body>

  <div id="container">

  </div>

</body>

</html>

Explanation

Inline comments added to the snippet above.