Vertical slider with list of images in jQuery

Question

Vertical slider with list of images in jQuery

Navigation

#1 by (0 votes)

0

I have the following list of images and videos being pulled from the database. I'd like this "ul" to go up the items infinitely in a vertical slider. I do not know much about jQuery, does anyone have any idea how to do this? The effect would look like this: link (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/<?phpecho$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>

php html jquery css slider

asked by anonymous 19.10.2018 / 15:26

1 answer

How to play this Delphi code in Python or C How to put an if within append Javascript

score 0 · 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 this I had to "clone" the last items of content in my hand. The idea here is that when the animation does loop the content of the end is equal to that of the beginning, so the user does not notice loop

See how it went 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>

Option identical to the site that the questioner had previously requested

Here is a template made with CSS only. The idea here is that I .container inside it has another container called .slider , this in turn has all the logos inside it. Now you just have to .slider move up 100% of height itself, for this I used transform:translateY(calc(-100% + a altura do .container)) so .slider goes up all but does not leave .conteiner empty ...

Applied Logic:

Tounderstandbetterseethecode:(IleftsomecommentsintheCSS,read!)

OBS:Theonlycaveatisthatthemoreitemsyouhaveinsidetheslider,thefasteritwillpass.Explain:IftheSlideis100pxtallandhas10stogothroughtheheightitself,itmoves10pxperSecond.Nowifheis200pxtallin10shewillnowmove20pxpersecond,sohewillmovetheanimationfaster.Tocorrectthisyoujusthavetoincreasetheanimationtimefrom10sto20s: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>