Question

0

278

Views

How 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>

This is what I've got now:

about 4 years ago · Juan Pablo Isaza

1 answers

Answer question

0

Answer question

Find remote jobs

Answer 1 · 2022-07-09T06:52:37.049Z

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>

0

278

How do I loop images in a div downwards infinitely using javascript?

1 answers

0

Find remote jobs

Andres GPT