Défilé Alain

Ce "randonneur" me demande le code de mon montage au clic; sa zone article étant de 850px de large, le voici dans cette dimension, avec 8 de mes images de 1920x1080px, réduites en 850x480px (16/9).

On peut ajouter ou retrancher des boutons/images dans ce code, en ajustant les dimensions et positionnements.

<div id="fd"><input id="bt1" class="bt" type="text" /><input id="bt2" class="bt" type="text" /><input id="bt3" class="bt" type="text" /><input id="bt4" class="bt" type="text" /><input id="bt5" class="bt" type="text" /><input id="bt6" class="bt" type="text" /><input id="bt7" class="bt" type="text" /><input id="bt8" class="bt" type="text" />
<p id="im0"><span style="background: rgba(0,0,0,0.5);">Clic sur chaque image pour avancement</span></p>
<p id="im1"><img style="width: 850px;" src="http://ekladata.com/JH4efQeMDTSOA07PVxtp9E5Nvxs.jpg" alt="" /><img style="width: 850px;" src="http://ekladata.com/bNNBWdZLgQOWeHpDKUK6cLkPOZQ.jpg" alt="" /><img style="width: 850px;" src="http://ekladata.com/0J1nCuCZnOJDjUWhjg5Yn3iVXHs.jpg" alt="" /><img style="width: 850px;" src="http://ekladata.com/5Ip8jSuM1Lfd0i_yqT1nrncT3xY.jpg" alt="" /><img style="width: 850px;" src="http://ekladata.com/ZK9t6whmhAbtsgNZY-hxReVN6vc.jpg" alt="" /><img style="width: 850px;" src="http://ekladata.com/PQBfRJPF-XTIHYuAazJiC2NjGT8.jpg" alt="" /><img style="width: 850px;" src="http://ekladata.com/TTBY4M6Qc8fhRvxadTYLQ-mPHm4.jpg" alt="" /><img style="width: 850px;" src="http://ekladata.com/SJvN9yx7GUnt8hGMmnizqs8X3-s.jpg" alt="" /></p>
</div>

<style><!--
#fd{position:relative; width:850px; height:480px; margin:0px auto; box-sizing:border-box; border:0px ridge grey; overflow:hidden;}
.bt{position:absolute; width:850px; height:480px; transform:translate(0px,0px); background:transparent;}
#bt1{ z-index:10;}
#bt2{ z-index:9;}
#bt3{ z-index:9;}
#bt4{ z-index:9;}
#bt5{ z-index:9;}
#bt6{ z-index:9;}
#bt7{ z-index:9;}
#bt8{ z-index:9;}
#im0{position:absolute; z-index:2; width:850px; height:480px; transform:translate(0px,0px); font-size:25px; color:white; text-shadow:2px 2px black; text-align:left; opacity:1; box-sizing:border-box; padding:50px 0 0 200px;}
#im1{position:absolute; width:6800px; height:480px; display:inline; transform:translate(0px,0px); transition:all 1s linear;}
#bt1:focus ~ #bt2{z-index:11;}
#bt2:focus ~ #bt3{z-index:12;}
#bt3:focus ~ #bt4{z-index:13;}
#bt4:focus ~ #bt5{z-index:14;}
#bt5:focus ~ #bt6{z-index:15;}
#bt6:focus ~ #bt7{z-index:16;}
#bt7:focus ~ #bt8{z-index:10;}

#bt1:focus ~ #im1{transform:translate(-850px,0px);}
#bt2:focus ~ #im1{transform:translate(-1700px,0px);}
#bt3:focus ~ #im1{transform:translate(-2550px,0px);}
#bt4:focus ~ #im1{transform:translate(-3400px,0px);}
#bt5:focus ~ #im1{transform:translate(-4250px,0px);}
#bt6:focus ~ #im1{transform:translate(-5100px,0px);}
#bt7:focus ~ #im1{transform:translate(-5950px,0px);}

#bt1:focus ~ #im0, #bt2:focus ~ #im0, #bt3:focus ~ #im0, #bt4:focus ~ #im0, #bt5:focus ~ #im0, #bt6:focus ~ #im0, #bt7:focus ~ #im0{opacity:0;}
--></style>