jquery - Adding buttons to slideshow -

i have simple slideshow here: http://jsfiddle.net/jtec5/17/
here's codes:
html:

<div id="slideshow">    <div>      <img src="http://i.imgur.com/m0us5a4.jpg">    </div>    <div>      <img src="http://i.imgur.com/akqe7hm.png">    </div>    <div>      <img src="http://i.imgur.com/x2ifizw.jpg">    </div> </div> 

css:

#slideshow {      margin: 50px auto;      position: relative;      width: 500px;      height: 300px;      padding: 10px;      box-shadow: 0 0 20px rgba(0,0,0,0.4);  }  #slideshow > div {      position: absolute;      top: 10px;      left: 10px;      right: 10px;      bottom: 10px;  } 

jquery:

$("#slideshow > div:gt(0)").hide();  setinterval(function() {    $('#slideshow > div:first')     .fadeout(1000)     .next()     .fadein(1000)     .end()     .appendto('#slideshow'); },  3000); 

i'm trying add buttons those: tells me in photo , how photos there in slideshow, when press button takes me photo in slideshow well, guess code must contain <ul> element, have tried , came solution didn't because doesn't take me photo should when press on button , it's tall code.. http://jsfiddle.net/jtec5/2/ other suggestions?

add span in page want buttons be

<span id='slideselector'></span> 

in ready function, add index attribute each .imglike div , corresponding radio button click handler in selector span

$('.imglike').each(function(i,el) {     $(el).attr('img-index',i);     $("<input>").attr({'id':'img-'+i, 'type':'radio', 'value':i, 'name':'slideselector'}).click(function() {select(i);}).appendto($('#slideselector')) }); 

define interval function outside interval click handler can call it, , have select radio button corresponding current image:

function rotate(speed) {    $('#slideshow > div:first')     .fadeout(speed)     .next()     .fadein(speed)     .end()     .appendto('#slideshow');   $('input[name="slideselector"]')[$('#slideshow > div:first div.imglike').attr('img-index')].checked=true; } 

the click handler like:

function select(idx) {     clearinterval(interval);     $('#slideshow > div:first').fadeout(1000)     while ($('#slideshow > div:first .imglike').attr('img-index') != idx) {       rotate(0);     }     $('#slideshow > div:first').fadein(1000);         interval = setinterval(function(){rotate(1000);}, 3000); } 

kick off with:

var interval = setinterval(function(){rotate(1000);}, 3000); 

and looks this: jsfiddle

just style buttons fit in theme.

edit: added styling make prettier jsfiddle