Estou tentando criar um slider / slideshow muito simples, sem autoplay, por favor. Eu só quero ir para a próxima imagem ou prev on click. Tendo alguns problemas, como você pode ler abaixo.

Aqui está ojsFiddle http://jsfiddle.net/HsEne/12/ (Eu apenas usei cores de fundo em vez de imagens no violino, bem como mudei img para divs, mas é exatamente o mesmo problema, claro)

O HTML:

<div id="slider-wrapper">

<div id="slider">
<img class="sp" src="/img1.jpg">
<img class="sp" src="/img2.jpg">
<img class="sp" src="/img3.jpg">
<img class="sp" src="/img4.jpg">
<img class="sp" src="/img5.jpg">
<img class="sp" src="/img6.jpg">
</div>

<img id="button-previous" src="/button-arrow-left.jpg">
<img id="button-next" src="/button-arrow-right.jpg">
</div>

O CSS:

#slider-wrapper {
display: block;
max-width: 790px;
margin: 5% auto;
max-height: 500px;
height: 100%; }

#slider {
display: block;
position: relative;
z-index: 99999;
max-width: 710px;
width: 100%;
margin: 0 auto; }

#button-previous { 
position: relative;
left: 0;
margin-top: 40%;
width: 40px;
height: 60px; }

#button-next {
position: relative;
margin-top: 40%;
float: right; }

.sp {
position: absolute; }

#slider .sp {
max-width: 710px;
width: 100%;
max-height: 500px; }

jQuery para o próximo botão:

jQuery("document").ready(function(){
    jQuery("#slider > img:gt(0)").hide();
     jQuery("#button-next").click(function() { 
        jQuery("#slider > img:first")
    .fadeOut(1000)
    .next()
    .fadeIn(1000)
    .appendTo("#slider");
  });
});

O jQuery acima funciona bem, exceto que ele pula a primeira imagem se um usuário clicar no próximo botão no último slide. Exibe apenas a primeira imagem uma vez, todas as outras imagens continuarão a deslizar sempre que clicar em seguida. Por alguma razão, display: none é adicionado à primeira imagem, mas não sei de onde vem esse código.

jQuery para o botão anterior:

jQuery("document").ready(function(){
    jQuery("#slider > img:gt(0)").hide();
     jQuery("#button-previous").click(function() { 
        jQuery("#slider > img:last")
    .fadeOut(1000)
    .next()
    .fadeIn(1000)
    .appendTo("#slider");
  });
});

Este código jquery acima retornará a imagem pré-visualizada como deveria. Mas quando clicado novamente, ele não faz nada.

Eu também tentei .prev () em substituição de .next (). Ele funciona bem na primeira vez que você clicar no botão anterior. Digamos que estamos vendo a imagem nº 4. Quando clico no botão anterior, ele vai para a imagem 3, como deveria. Mas quando clica nele novamente, ele não vai para a Imagem # 2, ele volta para a Imagem # 4 e, em seguida, # 3 e, em seguida, # 4, repetindo-se.