Próbuję stworzyć bardzo, bardzo prosty suwak / pokaz slajdów bez autoodtwarzania. Chcę tylko przejść do następnego lub poprzedniego obrazu po kliknięciu. Masz pewne problemy, które możesz przeczytać poniżej.

Tutaj jestjsFiddle http://jsfiddle.net/HsEne/12/ (po prostu użyłem kolorów tła zamiast obrazów w skrzydle, a także przełączałem img na div, ale oczywiście jest to dokładnie ten sam problem)

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 dla następnego przycisku:

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

Powyższe jQuery działa poprawnie, z wyjątkiem tego, że pomija pierwszy obraz, jeśli użytkownik kliknie następny przycisk na ostatnim slajdzie. Wyświetla tylko pierwszy obraz tylko raz, wszystkie pozostałe obrazy będą się przesuwać za każdym razem, gdy zostanie kliknięty. Z jakiegoś powodu wyświetlacz: żaden nie jest dodawany do pierwszego obrazu, ale nie wiem, skąd pochodzi ten kod.

jQuery dla poprzedniego przycisku:

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

Powyższy kod jquery zwróci właśnie podglądany obraz, tak jak powinien. Ale po ponownym kliknięciu nic nie robi.

Próbowałem także .prev () w zastępowaniu .next (). Działa dobrze po pierwszym kliknięciu poprzedniego przycisku. Powiedzmy, że oglądamy obraz # 4. Po kliknięciu poprzedniego przycisku przechodzi do Image # 3, tak jak powinien. Ale po ponownym kliknięciu nie przechodzi do Image # 2, wraca do Image # 4, a następnie # 3, a następnie # 4, powtarzając się.