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.