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

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

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

HTML:




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


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

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)

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