Einfache Img-Karussellfunktion funktioniert nicht?

Question

Also erstelle ich ein einfaches Bildkarussell für eine simulierte Webseite, die ich erstelle. Ich verfolge derzeit this tutorial auf YouTube. Minute: 7:10 zeigt die Funktion, nach der ich frage.

In diesem Tutorial erstellt er diese jquery-Funktion, um das Karussell zu aktivieren.

$(document).ready(function(){ 

    $(".nextLink").on("click", function(){ 
     var currentActiveImage = $(".image-shown"); 
     var nextActiveImage = currentActiveImage.next(); 

     currentActiveImage.removeClass(".image-shown").addClass(".image-hidden"); 
     nextActiveImage.addClass(".image-shown").removeClass("image-hidden"); 
    }); 

}); 

Hier ist der HTML

<div class="carousel-outer"> 
      <figure class="carousel-inner"> 
       <img class="image-shown" src="images/team/alex_morrales.jpg" alt=""> 
       <img class="image-hidden" src="images/team/david_kim.jpg" alt=""> 
       <img class="image-hidden" src="images/team/jenny_tabers.jpg" alt=""> 
       <img class="image-hidden" src="images/team/joey_barrett.jpg" alt=""> 
       <img class="image-hidden" src="images/team/melinda_lee.jpg" alt=""> 
       <img class="image-hidden" src="images/team/rachel_dotson.jpg" alt=""> 
      </figure> 
      <div class="img-buttons-box"> 
       <div class="img-buttons"> 
        <a class="previousLink" href="#">Previous</a> 
        <a class="nextLink" href="#">Next</a> 
       </div> 
      </div> 
     </div> 

Hier ist die CSS

.image-shown { 
    display: inline-block; 
} 

.image-hidden { 
    display: none; 
} 

ich den Eindruck habe, dass die obige Funktion in sich selbst genug ist, um das Karussell Arbeit gut und Zyklus zu haben, um durch die Fotos nahtlos.

Immer den nächsten in der Aufstellung anzeigen und den Rest ausblenden.

Dies ist jedoch offensichtlich nicht der Fall, da es so aussieht, als ob es vor und nach dem ersten Drücken der "nächsten" Taste (es macht nichts auf nachfolgenden Pressen).

Vor

Nach

Hilfe zu verstehen, warum die Funktion, wie es ist, nicht scheinbar genug ist, wird das Karussell Arbeit machen Sie sehr geschätzt, danke.

Answer 1

Wenn Sie eine Klasse in .removeClass() oder .addClass() referenzieren, müssen Sie den Punkt vor der Klasse nicht schreiben.

$(document).ready(function(){ 

    $(".nextLink").on("click", function(){ 
     var currentActiveImage = $(".image-shown"); 
     var nextActiveImage = currentActiveImage.next(); 

     currentActiveImage.removeClass("image-shown").addClass("image-hidden"); 
     nextActiveImage.addClass("image-shown").removeClass("image-hidden"); 
    }); 

}); 

PS: Ich sah dies mit den Devtools; klickte auf "Weiter" und sah, wie ein img Klassen mit dem Punkt bekam. Nur ein Hinweis, wenn Sie DOM-Änderungen schnell debuggen möchten.