Estoy tratando de hacer un deslizador de imagen / presentación de imágenes muy, muy simple sin reproducción automática, por favor. Solo quiero ir a la imagen siguiente o anterior al hacer clic. Teniendo algunos problemas como puedes leer a continuación.

Aquí esta lajsFiddle http://jsfiddle.net/HsEne/12/ (Acabo de usar colores de fondo en lugar de imágenes en el violín, así como cambiar img a divs, pero es el mismo problema, por supuesto)

El 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>

El 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 el siguiente botón:

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

El jQuery anterior funciona bien, excepto que omite la primera imagen si un usuario hace clic en el siguiente botón en la última diapositiva. Solo muestra la primera imagen una vez, todas las demás imágenes se deslizarán cada vez que se haga clic en la siguiente. Por alguna razón, se muestra: no se agrega ninguna a la primera imagen, pero no sé de dónde viene ese código.

jQuery para el botón 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 de jQuery de arriba devolverá la imagen que acaba de previsualizarse como debería. Pero cuando se vuelve a hacer clic, no hace nada.

También probé .prev () en reemplazo de .next (). Funciona bien la primera vez que haces clic en el botón anterior. Digamos que estamos viendo la Imagen # 4. Cuando hago clic en el botón anterior, va a la Imagen # 3, como debería ser. Pero cuando vuelve a hacer clic en él, no va a la Imagen # 2, vuelve a la Imagen # 4, y luego al # 3 y luego al # 4, repitiéndose.