add next & back buttons for custom gallery

Question

I have this javascript code:

$(function(){
    $('.words-gallery div:gt(0)').hide();

    setInterval(function() {
        $('.words-gallery > div:first')    
        .fadeOut(1000)    
        .next()
        .delay(995)
        .fadeIn(1000)    
        .end()    
        .appendTo('.words-gallery');},  
    3000);

});

This code will make a gallery from DIVs and every 3000 will hide the current DIV and show the next one.

I was trying to add next & back buttons but it's not working with me.

here is my fiddle:

http://www.jsfiddle.net/jUrNx

Any idea how to do it?

Answer 1

Why not use the jQuery Cycle plugin ? It will let you do everything you're asking and more. There is even a specific example using "next/prev" .

Here is a working fiddle: http://jsfiddle.net/3Qz5T/

Essentially, you would set up your code as follows:

HTML

<div class="nav"><a id="prev2" href="#">Prev</a> <a id="next2" href="#">Next</a></div>
<div class="words-gallery">
    <div>1</div>
    <div>22</div>
    <div>333</div>
</div>

JS

$('.words-gallery').cycle({ 
    fx:     'fade', 
    speed:  'fast', 
    timeout: 3000, 
    next:   '#next2', 
    prev:   '#prev2' 
});