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.