Очень простой слайдер / слайд-шоу изображений с левой и правой кнопкой. Нет автозапуска

Я пытаюсь сделать очень, очень простой слайдер / слайд-шоу с изображениями без автопроигрывания, пожалуйста. Я только хочу перейти к следующему или предыдущему изображению при нажатии. Возникли некоторые проблемы, как вы можете прочитать ниже.

ВотjsFiddle http://jsfiddle.net/HsEne/12/ (я просто использовал цвета фона вместо изображений в скрипке, а также переключил img на div, но это, конечно, та же проблема)

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>

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 для следующей кнопки:

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

Вышеупомянутый jQuery работает отлично, за исключением того, что он пропускает первое изображение, если пользователь нажимает следующую кнопку на последнем слайде. Первое изображение отображается только один раз, все остальные изображения будут скользить при каждом нажатии следующего. По какой-то причине показ: ни один не добавляется к первому изображению, но я не знаю, откуда этот код.

JQuery для предыдущей кнопки:

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

Приведенный выше код jquery вернет только что просмотренное изображение, как и должно быть. Но при повторном нажатии ничего не происходит.

Я также попытался .prev () вместо .next (). Он отлично работает при первом нажатии на предыдущую кнопку. Скажем, мы просматриваем изображение № 4. Когда я нажимаю предыдущую кнопку, она переходит к изображению № 3, как и должно быть. Но если щелкнуть по нему еще раз, оно не перейдет к изображению № 2, оно вернется к изображению № 4, затем к № 3 и затем к № 4, повторяя это.

Ответы на вопрос(4)

Ваш ответ на вопрос