0
279
VistasHow do I loop images in a div downwards infinitely using javascript?
I am working on an assignment with the description of:
Create a JavaScript loop using images to get the output as picture below. You can use any images and it is requiring to use maximum 5 images. The images should be loop infinitely. Use your own creativity to design the layout.
But I have no idea how to work on that, I only created a div with three images in it and stuck on the javascript part.
This is my code:
.container {
width: 100%;
height: 27vh;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
.box {
width: 200px;
height: 200px;
margin: 1px;
}
img {
width: 200px;
height: 200px;
}<div class="container">
<div class="box">
<img class="car" src="images/car1.jpg">
</div>
<div class="box">
<img class="car" src="images/car2.jpg">
</div>
<div class="box">
<img class="car" src="images/car3.jpg">
</div>
</div>
·
Juan Pablo Isaza
1 Respuestas
Responde la pregunta0
Here is something to get you started. I changed <div class="container"> to <div id="container"> and added another container within that one: .box-container.
The basic idea is to clone a container with the initial images, and then append (add) them to your original container.
let numberOfRows = 3;
const containerDiv = document.getElementById('container');
// get first element in #container, which is just one child: .box-container
let boxContainerDiv = containerDiv.children[0];
while (numberOfRows) {
numberOfRows--;
// clone the node
let clonedChild = boxContainerDiv.cloneNode(true);
// add the clone node to #container
containerDiv.appendChild(clonedChild);
}.box-container {
width: 100%;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
.box {
width: 200px;
height: 200px;
margin: 1px;
}
img {
width: 200px;
height: 200px;
border: 1px solid;
}<div id="container">
<div class="box-container">
<div class="box">
<img class="car" src="https://via.placeholder.com/200.png?text=1">
</div>
<div class="box">
<img class="car" src="https://via.placeholder.com/200.png?text=2">
</div>
<div class="box">
<img class="car" src="https://via.placeholder.com/200.png?text=3">
</div>
</div>
</div>
·
Juan Pablo Isaza
Denunciar
Responde la pregunta