Art.06.9.21

Une série de défilements au clic; ici, pour 5 images au ratio 16/9, en horizontal.

<div style="position: relative; overflow: hidden; width: 1000px; height: 562px; border: 3px ridge grey; text-align: left; margin: 20px auto;"><input id="ch1" class="ch" type="button" /> <input id="ch2" class="ch" type="button" /> <input id="ch3" class="ch" type="button" /> <input id="ch4" class="ch" type="button" /> <input id="ch5" class="ch" type="button" />
<p id="def"><img src="http://ekladata.com/NnN4J77WiCtexOXUx0-sPEhsfc0@1000x562.jpg" alt="" /><img src="http://ekladata.com/dxm2b0sUfB0ZbHjeqiBN1tZch5s@1000x562.jpg" alt="" /><img src="http://ekladata.com/GohmX9VaDbwtmZWmhc2OOU-RoFU@1000x562.jpg" alt="" /><img src="http://ekladata.com/LmC6fY8yW_MPnsE2EK8gPWKoqwo@1000x562.jpg" alt="" /><img src="http://ekladata.com/cTSfe8X3nFRmKVFkZcKlVWLqTns@1000x562.jpg" alt="" /></p>
</div>
<style><!--
.ch{position:absolute; z-index:5; background:coral!important; width:20px; height:20px; border-radius:50%;}
#ch1{transform:translate(200px,535px);}
#ch2{transform:translate(300px,535px);}
#ch3{transform:translate(500px,535px);}
#ch4{transform:translate(700px,535px);}
#ch5{transform:translate(800px,535px);}
#def{position:absolute; z-index:1; width:5000px; height:562px; transform:translate(-2000px,0px); transition:all 1s;}
#ch1:focus ~ #def{transform:translate(0px,0px);}
#ch2:focus ~ #def{transform:translate(-1000px,0px);}
#ch3:focus ~ #def{transform:translate(-2000px,0px);}
#ch4:focus ~ #def{transform:translate(-3000px,0px);}
#ch5:focus ~ #def{transform:translate(-4000px,0px);}
.ch:focus{background:lime!important;}
--></style>