シンプルなimgカルーセル機能が動作していませんか？

Question

私は構築している模擬ウェブページの簡単な画像カルーセルを作成しています。 私は現在、YouTubeのthis tutorialに従っています。分：7時10分私が求めている機能を示しています。

このチュートリアルでは、このjquery関数を作成してカルーセルをアクティブにします。

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

}); 

ここで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> 

は、ここで私は自分自身で上記の機能はを通じてカルーセル作業だけでなく、サイクルを持っているのに十分であるという印象の下だCSS

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

.image-hidden { 
    display: none; 
} 

だです写真をシームレスに

常に次のラインナップをラインナップに表示し、残りのラインを非表示にします。

しかし、これは明らかに私が「次の」ボタンを押す（前後のプレスでは何もしない）前と後のように見えるためです。

機能は、そのまま、一見非常に高く評価されたカルーセル作品を作るのに十分ではない理由を理解するヘルプ

後

前に、ありがとうございました。

Answer 1

.removeClass()または.addClass()でクラスを参照するときは、クラスの前にドットを書く必要はありません。

$(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：devtoolsを使用してこれを確認しました。 「次へ」をクリックして、imgにどのようにドットが付いたクラスがあるかを見ました。 DOMの変更を素早くデバッグしたい場合はアドバイスをお願いします。