Montage 328

Déjà proposé mais ça date ... 6 images, ratio 16/9, en 900px par 506px avec avancement au clic.

<div style="position:relative; width:900px; height:506px; margin:5px auto; border:2px solid black; text-align:left; overflow:hidden;">
<input id="def1" class="def" type="button">
<input id="def2" class="def" type="button">
<input id="def3" class="def" type="button">
<input id="def4" class="def" type="button">
<input id="def5" class="def" type="button">
<input id="def6" class="def" type="button">
<p id="cont">
<img class="conta" src="http://ekladata.com/Q5Mzio8oO-hYohCUKzDqeprKhYU@900x506.jpg">
<img class="conta" src="http://ekladata.com/B2Xr2WPNwbAhqaVPdjleTw3jvEU@900x506.jpg">
<img class="conta" src="http://ekladata.com/0AepQ9p0MzU1hGvmazM2LEJVeTU@900x506.jpg">
<img class="conta" src="http://ekladata.com/L_hTpbSXa-ksXCfN-MZeq4NGtVs@900x506.jpg">
<img class="conta" src="http://ekladata.com/Tl8GT_iUK0yVSkV8M5kc3kayMHc@900x506.jpg">
<img class="conta" src="http://ekladata.com/ypQcFmIlVSOdwXbqaY3WMz31jfE@900x506.jpg">
</div>

<style><!--
.def{position:absolute; z-index:5; width:10px; height:20px; border-radius:50%;}
#def1{transform:translate(150px, 480px);}
#def2{transform:translate(200px, 480px);}
#def3{transform:translate(250px, 480px);}
#def4{transform:translate(300px, 480px);}
#def5{transform:translate(350px, 480px);}
#def6{transform:translate(400px, 480px);}
#cont{position:absolute; z-index:1; width:5450px; height:506px; transition:all 1s linear;}
.conta{float:left; width:900px; height:506px);}
#def1:focus ~ #cont{transform:translate(0px,0px);}
#def2:focus ~ #cont{transform:translate(-900px,0px);}
#def3:focus ~ #cont{transform:translate(-1800px,0px);}
#def4:focus ~ #cont{transform:translate(-2700px,0px);}
#def5:focus ~ #cont{transform:translate(-3600px,0px);}
#def6:focus ~ #cont{transform:translate(-4500px,0px);}
--></style>