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

Question

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

Navigation

#1 by (2 votes)

1

Friends, I need to mount this slide where I can have a control, that is, next and previous button. In the example the structure is ready, but I do not know how to implement the prev and next controls in jquery. Could someone help?

The link below with the example.

link

jquery div slide

asked by anonymous 24.09.2015 / 14:40

1 answer

How to convert Json to Object where column name is a variable number using HttpResponseMessage Generate merge and branch graphs in GIT?

score 2 · Accepted Answer

I've changed your code a 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 the slide change in a function called change , which gets the name of the function that will fetch the next slide, which 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 the default behavior, if it was not going to be messed up, with the interval changing the slide along with the user action. You can start the interval again after the action, if you prefer.