Repeat div element to simulate an infinite slider

Question

Repeat div element to simulate an infinite slider

Navigation

#1 by (1 votes)
#2 by (0 votes)

2

Good morning,

I would like to know if there is any way to make a slider that is infinite. I currently have a slider with a div that has a linear motion animation that is repeated.

<div class="cont-princ-slider">
    <img class="degradado" src="imagenes/fondo_blanco_slider.png" alt="">
    <div class="slier-prin">
        <div class="juegos_DWG">
            <img src="caratulas/7_Days_to_Die_XboxOne.png" alt="">
        </div>
        <div class="juegos_DWG">
            <img src="caratulas/advaced_sp.png" alt="">
        </div>
        <div class="juegos_DWG">
            <img src="caratulas/Active_Soccer_2_DX_XboxOne.png" alt="">
        </div>
        <div class="juegos_DWG">
            <img src="caratulas/Alekhine's_Gun_XboxOne.png" alt="">
        </div>
        <div class="juegos_DWG">
            <img src="caratulas/7_Days_to_Die_XboxOne.png" alt="">
        </div>
        <div class="juegos_DWG">
            <img src="caratulas/7_Days_to_Die_XboxOne.png" alt="">
        </div>
    </div>
</div>

The CSS part:

.cont-princ .cont-princ-slider { 
      width: 97%;
      height: 200px;
      background: black;
      margin: auto;
      margin-top: 20px;
      position: relative;
      overflow: hidden;
}

.cont-princ-slider .degradado {
      position: absolute;
      z-index: 5;
      left: -1px;
      height: 105%;
}

.slier-prin {
      height: 100%;
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-start;
      position: absolute;
      top: 0;
      left: 0;
      animation: slider 16s infinite linear;
      outline: 2px solid blue;
}

.cont-princ-slider .juegos_DWG {
      height: 100%;
      padding: 10px;
      margin-left: 2px;
      margin-right: 2px;
}

@keyframes slider {
      to {
           left: -150%;
      }
}

If I use a for loop that adds up to 3 times the same information I get more or less the results I'm looking for, but I do not think that's good for loading the page:

<div class="slier-prin">

    <?php for ($i=0; $i < 4; $i++) { ?>

          <div class="juegos_DWG">
                <img src="caratulas/7_Days_to_Die_XboxOne.png" alt="">
          </div>
          <div class="juegos_DWG">
                <img src="caratulas/advaced_sp.png" alt="">
          </div>
          <div class="juegos_DWG">
                <img src="caratulas/Active_Soccer_2_DX_XboxOne.png" alt="">
          </div>
          <div class="juegos_DWG">
                <img src="caratulas/Alekhine's_Gun_XboxOne.png" alt="">
          </div>
          <div class="juegos_DWG">
                <img src="caratulas/7_Days_to_Die_XboxOne.png" alt="">
          </div>
          <div class="juegos_DWG">
                <img src="caratulas/7_Days_to_Die_XboxOne.png" alt="">
          </div>
          <div class="juegos_DWG">
                <img src="caratulas/7_Days_to_Die_XboxOne.png" alt="">
          </div>
          <div class="juegos_DWG">
                <img src="caratulas/7_Days_to_Die_XboxOne.png" alt="">
          </div>


     <?php } ?>

</div>

html php css

asked by JetLagFox 02.02.2017 в 19:21

source

2 answers

Run at the beginning a script developed with nodejs in ubuntu server 16? Convert string currency to double without knowing the format

score 1 · Answer 1

You have already done the main thing, as there is no user interaction, an easy way to achieve what you want is to go to the animations CSS3 , only that instead of using left or margin-left (that if the If you set percentage values relative to the container, you should use translateX (which in percentage values is relative to the element itself). This way if you put translateX(-50%) in a container that has the duplicate elements, this will be exactly in the same center leaving the right half visible while the left half would be hidden by the overflow hidden , this is the point where your animation should end and start again and since the elements are copies of each other you would not notice the jump.

As for the duplicate of the images you should do it by JavaScript . Here I leave a functional example of what I tell you:

var slider = document.querySelector(".slier-prin");

slider.innerHTML += slider.innerHTML;

.cont-princ-slider {
  height: 100px;
  overflow: hidden;
  width: 100%;
}

.slier-prin {
  display: inline-flex;
  -moz-animation: slider 5s infinite linear;
  -webkit-animation: slider 5s infinite linear;
  animation: slider 5s infinite linear;
  height: 100%;
  width: auto;
}

.juegos_DWG {
  background: #CCC;
  border: 1px solid #FFF;
  color: #FFF;
  font-family: Arial;
  font-size: 16px;
  line-height: 100px;
  height: 100%;
  flex: 0 0 auto;
  text-align: center;
  width: 150px;
}

@keyframes slider {
  to {
    -moz-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
  }
}

<div class="cont-princ-slider">
  <div class="slier-prin">
    <div class="juegos_DWG">01</div>
    <div class="juegos_DWG">02</div>
    <div class="juegos_DWG">03</div>
    <div class="juegos_DWG">04</div>
    <div class="juegos_DWG">05</div>
    <div class="juegos_DWG">06</div>
  </div>
</div>

score 0 · Answer 2

Of course, repeating the information with php to simulate the effect is not a very good idea. As you already anticipated, this implies an unnecessary excess in the data that travels from the server to the client.

What you can do is duplicate them already in the client with jQuery . You take the original information and duplicate it as necessary, then animate it.

It works and it can help you find your own solution.

function duplicarProductos () {
    var $clones = $( '.contenedor .elementos' ).clone();
    //Si tus elementos tienen id y quieres modificarlo en los clones.
    //si duplicas más de una vez deberías tomarlo en cuenta para no tener id duplicados en el código final.
    $clones.each(function (index, element) {
        $( element ).attr( 'id', $( element ).attr( 'id' ) + '-clon' );
    });
    $( '.contenedor' ).append( $clones );
}