Slide control (in div) with jquery - next and Prev function?

Question

Friends, I need to assemble this slide where I can have a control, that is, next and previous button. In the example the structure is ready, but I don’t know how to implement the previous and next jquery controls. Could someone help?

The link below with the example.

http://jsfiddle.net/5v0uL6mb/

Answer 1

I changed your code a little bit:

var interval = setInterval(function(){
    change("next");
}, 3000);

var change = function(fn) {
    $ds.filter(':visible').fadeOut(function(){
        var $div = $(this)[fn]('.article-inform');
        if ( $div.length == 0 ) {
            if (fn == "next") {
                $ds.eq(0).fadeIn();
            }
            else {
                $($ds[$ds.length - 1]).fadeIn();
            }
        } else {
            $div.fadeIn();
        }
    });
};

$(".preview .prev").on("click", function() {
    window.clearInterval(interval);
    change("prev");
});

$(".preview .next").on("click", function() {
    window.clearInterval(interval);
    change("next");
});

Fiddle

I put changing slides in a function called change, that takes the name of the function that fetches the next slide, it can be prev or next:

$(this)[fn]('.article-inform');

Other than that, I made the slide control stop the interval when a user action changes the slide. I think it’s standard behavior, if it wasn’t going to get messy, with the interval changing the slide along with the user’s action. You can start the interval again after the action, if you prefer.