1

Amigos, estou precisando montar esse slide onde possa ter um controle, ou seja, botão de próximo e anterior. No exemplo a estrutura esta pronta, mas não sei como devo implementar os controle prev e next do jquery. Alguém poderia ajudar?

O link abaixo com o exemplo.

http://jsfiddle.net/5v0uL6mb/

1 Resposta 1

2

Mudei seu código um pouco:

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

Coloquei a mudança de slides em uma função chamada change, que recebe o nome da função que vai buscar o próximo slide, podendo ser prev ou next:

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

Fora isso, fiz o controle de slides parar o intervalo quando uma ação do usuário muda o slide. Acho que é o comportamento padrão, se não ia ficar bagunçado, com o intervalo mudando o slide junto com a ação do usuário. Dá pra fazer o intervalo iniciar novamente após a ação, se preferir.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .