Vertical slider with picture list in jQuery

Question

I have the following list of images and videos that are being pulled from the database. I would like that "ul" to keep climbing the items infinitely in a vertical slider. Don’t know much jQuery, does anyone have any idea how to make that effect? The effect would be like this: http://centralsigma.com.br/ (Like the banners on the left side of this site)

<div class="banner">
  <div class="item">
    <ul>
      <?php

      $sql = "SELECT * FROM banner ORDER BY id DESC";


      try {
        $result = $conexao->prepare($sql);
        $result->execute();

        $contar = $result->rowCount();
        if ($contar>0) {
          while ($show = $result->FETCH(PDO::FETCH_ASSOC)) {
            $midia = $show['midia'];
            $link = $show['link'];
            $tipo = $show['tipo'];

            if ($tipo == "Imagem") {
      ?>
      <li>
        <?php if ($link != "") {
          echo '<a href="'.$link.'" target="_blank">';
        } ?>
          <img id="myImg" src="banner/<?php echo $midia; ?>" alt="Publicidade" style="width:100%;max-width:340px; height:170px">
          <?php if ($link != "") {
            echo '</a>';
          } ?>
      </li>
    <?php } else { ?>
      <li>
        <a href="javascript:modal('<?php echo $midia; ?>')" id="play"><i class="fas fa-play"></i></a>
        <img src="http://i1.ytimg.com/vi/<?php echo $midia; ?>/mqdefault.jpg" alt="Miniatura Vídeo" style="width:100%;max-width:340px; height:170px">
      </li>
      <?php } } }
        } catch (PDOException $e) {
          echo $e;
        }
      ?>
    </ul>
  </div>
</div>

Answer 1

EDIT

As the author changed the definition of what he really needed I did this other example trying to simulate the looping of slider. But for that I needed to "clone" the last items of the content in hand. The idea here is that when the animation does the loop the content of the end is equal to the beginning, so the user does not notice the loop

See how it looked in the example.

.container {
  width: 200px;
  height: 220px;
  background-color: #ddd;
  display: flex;
  flex-wrap: wrap;
  position: relative;
  border: 1px solid;
  overflow: hidden;
}
.slider {
  background-color: #ddd;
  display: flex;
  flex-wrap: wrap;
  animation: anima 4s infinite linear;
  position: relative;
}

.logo {
  margin: 10px;
  width: 80px;
  height: 80px;
  background-color: #333;
}

@keyframes anima {
  10% {
    transform: translateY(0);
  }
  100% {
    /* 180px e a altura do container descontando as margens pode ser que vc tenha que ajustar esse tamanho dependo da altura do seu container */
    transform: translateY(calc(-100% + -180px));
  }
}

<div class="container">
  <div class="slider">
    <div class="logo">
      <img src="https://unsplash.it/81/80" alt="">
    </div>
    <div class="logo">
      <img src="https://unsplash.it/80/80" alt="">
    </div>
    <div class="logo">
      <img src="https://unsplash.it/80/80" alt="">
    </div>
    <div class="logo">
      <img src="https://unsplash.it/80/80" alt="">
    </div>
    <div class="logo">
      <img src="https://unsplash.it/80/80" alt="">
    </div>
    <div class="logo">
      <img src="https://unsplash.it/80/80" alt="">
    </div>
    <div class="logo">
      <img src="https://unsplash.it/80/80" alt="">
    </div>
    <div class="logo">
      <img src="https://unsplash.it/80/80" alt="">
    </div>

    <!-- clones para fazer o looping -->
    <div class="logo">
      <img src="https://unsplash.it/81/80" alt="">
    </div>
    <div class="logo">
      <img src="https://unsplash.it/80/80" alt="">
    </div>
    <div class="logo">
      <img src="https://unsplash.it/80/80" alt="">
    </div>
    <div class="logo">
      <img src="https://unsplash.it/80/80" alt="">
    </div>
    <div class="logo">
      <img src="https://unsplash.it/80/80" alt="">
    </div>
    <div class="logo">
      <img src="https://unsplash.it/80/80" alt="">
    </div>

  </div>
</div>

---

Same option as the site that the questioner had previously requested

Follows a template made only with CSS. The idea here is that I one .container that inside him has another container called .slider, this in turn has inside it all logos. Now just you do the .slider move up 100% of the height itself, for this I used transform:translateY(calc(-100% + a altura do .container)) thus the .slider goes all the way up, but doesn’t leave . container empty...

Applied logic:

To better understand see the code:
(I left some comments on CSS, read!)

OBS: The only caveat is that the more items you have inside the slider, the faster it will pass. I explain: If the Slide is 100px high and has 10s to travel its own height it displaces 10px per Second. Now if he is 200px high in 10s he will now shift 20px per second, soon he will pass the animation faster. To fix this you just need to increase the animation time from 10s to 20s :D

.container {
  width: 200px;
  height: 220px;
  background-color: #ddd;
  display: flex;
  flex-wrap: wrap;
  position: relative;
  border: 1px solid;
  overflow: hidden;
}
.slider {
  position: absolute;
  display: flex;
  flex-wrap: wrap;
  transform: translateY(0);
  animation: anima 6s infinite alternate linear;
}
.logo {
  margin: 10px;
  width: 80px;
  height: 80px;
}

@keyframes anima {
  10% {
    transform: translateY(0);
  }
  20% {
    /* aqui eu repito a propriedade para deixar o slide para um tempo antes de rodar */
    transform: translateY(0);
  }
  90% {
    /* aqui o slide sobe 100% da própria altura, menos a altura do container */
    transform: translateY(calc(-100% + 220px));
  }
  100% {
    transform: translateY(calc(-100% + 220px));
  }
}

  <div class="container">
    <div class="slider">
      <div class="logo">
        <img src="https://unsplash.it/80/81" alt="">
      </div>
      <div class="logo">
        <img src="https://unsplash.it/81/80" alt="">
      </div>
      <div class="logo">
        <img src="https://unsplash.it/80/80" alt="">
      </div>
      <div class="logo">
        <img src="https://unsplash.it/81/80" alt="">
      </div>
      <div class="logo">
        <img src="https://unsplash.it/80/80" alt="">
      </div>
      <div class="logo">
        <img src="https://unsplash.it/80/81" alt="">
      </div>
      <div class="logo">
        <img src="https://unsplash.it/81/80" alt="">
      </div>
      <div class="logo">
        <img src="https://unsplash.it/80/80" alt="">
      </div>
      <div class="logo">
        <img src="https://unsplash.it/80/81" alt="">
      </div>
    </div>
  </div>