Défilé vertical avec boutons

Clic sur un bouton pour afficher l'iamge correspondante.
Mes images sont au format 1000x563px (16/9) mais il simple d'utiliser ce principe pour tout autre format.
je suis à votre disposition pour toute adaptation.

<div id="mg"><input id="bt1" class="bt" type="text" value="1" /> <input id="bt2" class="bt" type="text" value="2" /><input id="bt3" class="bt" type="text" value="3" /><input id="bt4" class="bt" type="text" value="4" /> <input id="bt5" class="bt" type="text" value="5" /><input id="bt6" class="bt" type="text" value="6" /><span id="def"><img src="http://ekladata.com/LiS5fo3g0NAV5nKybEJAC1AFC0M/1251.jpg" alt="" /><img src="http://ekladata.com/W4MHQwipKtrvrIkZSNYQlrsaZMU/1252.jpg" alt="" /><img src=" http://ekladata.com/drdG6St24wsIFMgDi5lEqa_YrDE/1253.jpg" alt="" /><img src="http://ekladata.com/BY_fCIz8jUEkJCwuzaNeWSwQvXM/1255.jpg" alt="" /><img src="http://ekladata.com/8dvoOwL62NTLx9dAW_RA4LlgmZg/1257.jpg" alt="" /><img src=" http://ekladata.com/y74hN39QGaj6h9NrxaT970-t60w/1258.jpg" alt="" /> </span></div>

<style><!--
#mg{position: relative; width: 1000px; height: 563px; border:6px ridge grey; overflow: hidden; margin:10px auto;}
.bt{width:20px; height:20px; text-align:center; font-size:14pt; border-radius:50%; background:yellow; }
.bt:focus{background:green;}
#bt1{position:absolute; z-index:10; transform:translate(960px,50px);}
#bt2{position:absolute; z-index:10; transform:translate(960px,100px);}
#bt3{position:absolute; z-index:10; transform:translate(960px,150px);}
#bt4{position:absolute; z-index:10; transform:translate(960px,200px);}
#bt5{position:absolute; z-index:10; transform:translate(960px,250px);}
#bt6{position:absolute; z-index:10; transform:translate(960px,300px);}
#def{position:absolute; width:1000px; height:3378px; transform:translate(0px,0px); transition:all 1s linear;}
#bt1:focus ~ #def{transform:translate(0px,0px);}
#bt2:focus ~ #def{transform:translate(0px,-563px);}
#bt3:focus ~ #def{transform:translate(0px,-1126px);}
#bt4:focus ~ #def{transform:translate(0px,-1689px);}
#bt5:focus ~ #def{transform:translate(0px,-2252px);}
#bt6:focus ~ #def{transform:translate(0px,-2815px);}
--></style>