• Diapo 9

    Code d'un montage publié, avec images au ratio 16/9 en 1000x563px.


    <div style="position: relative; margin: 30px auto; text-align: left; width: 1000px; height: 563px; border: 4px ridge white; background: url('http://ekladata.com/SEd6b_9j1eeY_44mnhWgSjgpjd8@1000x563.jpg'); background-size: cover; overflow: hidden;">
    <p id="vt"><img class="vaut" src="http://ekladata.com/mMTRwWRL27rI4hzjLjrtrpPoumY@1000x563.jpg" alt="" /><img class="vaut" src="http://ekladata.com/cOFz1IwIYgs9qadBthQph28GU64@1000x563.jpg" alt="" /><img class="vaut" src="http://ekladata.com/0Sqvksa9q1xloXeTPEGcNBstXCE@1000x563.jpg" alt="" /><img class="vaut" src="http://ekladata.com/b6hiZ0I3YUK64sktjHzUNFDCwMg@1000x563.jpg" alt="" /><img class="vaut" src="http://ekladata.com/K5edXVczRdjTBu-jJSvIVHzZ8Lc@1000x563.jpg" alt="" /><img class="vaut" src="http://ekladata.com/6HA42FheAZX8akbG-QMEqJb0zlc@1000x563.jpg" alt="" /></p>
    </div>
    <style><!--
    .vaut{width:1000px; height:563px;}
    #vt{display:inline-block;width:6000px; height:563px; animation: vautour 16s 0s linear infinite alternate;}
    @keyframes vautour{
    0%{transform:translate(-6000px,0px);}
    8%{transform:translate(-6000px,0px);}
    9%{transform:translate(-5000px,0px);}
    25%{transform:translate(-5000px,0px);}
    26%{transform:translate(-4000px,0px);}
    42%{transform:translate(-4000px,0px);}
    43%{transform:translate(-3000px,0px);}
    59%{transform:translate(-3000px,0px);}
    60%{transform:translate(-2000px,0px);}
    75%{transform:translate(-2000px,0px);}
    76%{transform:translate(-1000px,0px);}
    91%{transform:translate(-1000px,0px);}
    92%{transform:translate(0px,0px);}
    100%{transform:translate(0px,0px);}}
    --></style>