Skip to main content
adicionou 154 caracteres ao conteúdo
Fonte Link
DontVoteMeDown
  • 2,6mil
  • 15
  • 23

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");
});

FiddleFiddle

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.

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 ) {
            $ds.eq(0).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.

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.

Fonte Link
DontVoteMeDown
  • 2,6mil
  • 15
  • 23

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 ) {
            $ds.eq(0).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.