How do i make pictures next together with unordered list under them in a marquee

As said in the title, im trying to find a way to add pictures with an unordered list inside a marquee something like this example . And this is what I currently have

<HTML>
<body>
<marquee>
<div>
<img src="img">
    <span class="caption"><ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul></span>
</div>
<div>
<img src="img">
    <span class="caption"><ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul></span>
</div>
</marquee>
</body>
</html>

Solution

As the marquee tag is deprecated this snippet uses a slightly different method.

It has two copies of each of the marquee items and lays them out in a container which is a horizontal grid which takes up twice the width of the container (in this case, the viewport).

In this way we can translate the container 50% to the left and then repeat the animation - the second part of the container will be 'replaced' by the first and the movement will be continuous.

A second thing that had to be fixed was having a ul in a span. Instead the span has become a div.

<HTML>

<head>
  <title>Banner</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
    .banner {
      width: 200vw;
      display: grid;
      grid-template-columns: repeat(8, 1fr);
      gap: 0;
      position: absolute;
      top: 0;
      left: 0;
      animation: move infinite 6s linear;
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    
    @keyframes move {
      0% {
        transform: translateX(0);
      }
      100% {
        transform: translateX(-50%);
      }
    }
    
    .banner>* {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
    
    .banner img {
      width: 10vh;
      height: 10vh;
      object-fit: cover;
    }
    
    .caption ul {
      padding-inline-start: 0;
    }
    
    .
  </style>
</head>

<body>
  <div class="banner">
    <div>
      <img src="https://picsum.photos/id/1015/200/300">
      <div class="caption">
        <ul>
          <li>1</li>
          <li>2</li>
          <li>3</li>
          <li>4</li>
        </ul>
      </div>
    </div>
    <div>
      <img src="https://picsum.photos/id/1016/300/200">
      <div class="caption">
        <ul>
          <li>1</li>
          <li>2</li>
          <li>3</li>
          <li>4</li>
        </ul>
      </div>
    </div>
    <div>
      <img src="https://picsum.photos/id/1015/200/300">
      <div class="caption">
        <ul>
          <li>1</li>
          <li>2</li>
          <li>3</li>
          <li>4</li>
        </ul>
      </div>
    </div>
    <div>
      <img src="https://picsum.photos/id/1016/300/200">
      <div class="caption">
        <ul>
          <li>1</li>
          <li>2</li>
          <li>3</li>
          <li>4</li>
        </ul>
      </div>
    </div>
    <div>
      <img src="https://picsum.photos/id/1015/200/300">
      <div class="caption">
        <ul>
          <li>1</li>
          <li>2</li>
          <li>3</li>
          <li>4</li>
        </ul>
      </div>
    </div>
    <div>
      <img src="https://picsum.photos/id/1016/300/200">
      <div class="caption">
        <ul>
          <li>1</li>
          <li>2</li>
          <li>3</li>
          <li>4</li>
        </ul>
      </div>
    </div>
    <div>
      <img src="https://picsum.photos/id/1015/200/300">
      <div class="caption">
        <ul>
          <li>1</li>
          <li>2</li>
          <li>3</li>
          <li>4</li>
        </ul>
      </div>
    </div>
    <div>
      <img src="https://picsum.photos/id/1016/300/200">
      <div class="caption">
        <ul>
          <li>1</li>
          <li>2</li>
          <li>3</li>
          <li>4</li>
        </ul>
      </div>
    </div>

  </div>
</body>

</html>