Diashow-Komponente - kleiner Fehler

Question

Ich versuche, eine kleine Diashow-Komponente mit jQuery nur für Lernzwecke zu bauen (Ich versuche nicht, das Rad neu zu erfinden).

HTML:

<div class="slideshow"> 
    <div class="slideshow-controller prev"> 
    <p>prev</p> 
    </div> 
    <div class="slideshow-wrapper"> 
    <img src="//placehold.it/150x200/FF9800" alt=""> 
    <img src="//placehold.it/150x200/757575" alt=""> 
    <img src="//placehold.it/150x200/BDBDBD" alt=""> 
    <img src="//placehold.it/150x200/2196F3" alt=""> 
    <img src="//placehold.it/150x200/00BCD4" alt=""> 
    <img src="//placehold.it/150x200/009688" alt=""> 
    </div> 
    <div class="slideshow-controller next"> 
    <p>next</p> 
    </div> 
</div> 

JS:

(function($) { 
    var prev = $('.prev'); 
    var next = $('.next'); 
    var img = $('.slideshow-wrapper img'); 

    var slides = 2; 

    img.slice(slides).css({ 'display': 'none' }); 

    next.on('click', function() { 
    img.css({ 'display': 'none' }); 
    img.slice(slides, slides + 2).css({ 'display': '' }); 

    slides += 2; 

    if (slides === 8) 
     { slides = 0; img.slice(slides, slides + 2).css({ 'display': '' }); } 

    console.log('next'); 
    console.log(slides); 
    }); 

    prev.on('click', function() { 
    slides -= 2; 
    if (slides === 0) { slides = 6; } 

    img.css({ 'display': 'none' }); 
    img.slice(slides - 2, slides).css({ 'display': '' }); 

    console.log('previous'); 
    console.log(slides); 
    }); 
}(jQuery)); 

ich in der Lage bin zu erkennen, ob die letzte Folie erreicht wird, geht es zurück zu schieben Index

Die Komponente ist ziemlich einfach 0 (wenn der Benutzer auf Next klickt). Oder umgekehrt (wenn der Benutzer durch einen Klick auf „zurück“ beginnt) erreichen 6.

DAS PROBLEM Stössel:

Nach erfolgreichem sagen erreicht (0 bis 6) und es wird neu gestartet, die ersten 2 Rutschen zweimal anzeigen (Sie müssen zweimal klicken, um die erste Folie zu übergeben).

Ich habe console.log(slides) verwendet, um das Problem zu sehen, und es sieht aus wie es 0 dann 2 geht. Offensichtlich, weil ich sagte, auf Folie 0 gehen, wenn der Benutzer Folie Index 5 erreicht. Ich weiß nicht, wie das Problem zu lösen bis jetzt.

Ich bin mir ziemlich sicher, dass es etwas Dummes ist, das ich vergessen habe zu tun.

Hier ist ein jsfiddle Link: https://jsfiddle.net/marco321/beah5v0d/

Vielen Dank! Mark

Answer 1

So fand ich die Antwort auf mein Problem, ich habe einfach vergessen, eine weitere if else Anweisung hinzuzufügen.

if (slides === 8) { 
    slides = 0; 
    img.slice(slides, slides + 2).css({ 'display': '' }); 
    if (slides === 0) { 
    slides = 2; img.slice(slides).css({ 'display': 'none' }); 
    } 
} 

Sobald ich feststellen, dass Dia-Index 0 ist, dann einfach ich muss es auf 2. Jetzt neu zuzuweisen, werde ich in der Lage, auf den zweiten Satz von Dias zu springen ...