I'm having trouble creating a functional slideshow with buttons. Each button should display its corresponding div when clicked, while the slideshow continues to function as normal.
View the demo here: http://jsfiddle.net/sabeti05/dsagcc5u/
HTML
<div id="slideshow">
<div class=" hide block">
one
</div>
<div class="hide">
two
</div>
<div class="hide">
three
</div>
</div>
<button class="one">one</button>
<button class="two">two</button>
<button class="three">three</button>
CSS
body{text-align:center}
#slideshow {
height: 40px;
margin: 0 auto;
position: relative;
width: 100px;
}
#slideshow > div {
position: absolute;
}
.hide {
display: none;
}
.block {
display: block;
}
jQuery
$(document).ready(function(){
setInterval(function() {
$('#slideshow > div.block')
.removeClass("block")
.next()
.addClass("block")
.end()
.appendTo('#slideshow');
}, 1000);
});