title: fadeOut(...).removeClass is not a function
body: <p>I am having a little problem when I am building a slider with images. I am a beginner in javascript and jquery so I've built id based on what I've done on codeacademy a while back (used to work fine there but it doesn't work anymore even there). It works fine when I click the next arrow but when I click the previous arrow it doesn't work anymore. It says in console "Uncaught TypeError: currentSlide.fadeOut(...).removeCLass is not a function".</p>
  
  <p>Here's my code:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="slider"&gt;
      &lt;div class="slide slide1 active-slide"&gt;
      &lt;/div&gt;
      &lt;div class="slide slide2"&gt;
      &lt;/div&gt;
      &lt;div class="slide slide3"&gt;
      &lt;/div&gt;
      &lt;div class="slide slide4"&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="slider-nav"&gt;
      &lt;a href="#" class="arrow-prev"&gt;&lt;img src="images/props/arrow-prev.png"&gt;&lt;/a&gt;
      &lt;ul class="slider-dots"&gt;
          &lt;li class="dot active-dot"&gt;&amp;bull;&lt;/li&gt;
          &lt;li class="dot"&gt;&amp;bull;&lt;/li&gt;
          &lt;li class="dot"&gt;&amp;bull;&lt;/li&gt;
          &lt;li class="dot"&gt;&amp;bull;&lt;/li&gt;
      &lt;/ul&gt;
      &lt;a href="#" class="arrow-next"&gt;&lt;img src="images/props/arrow-next.png"&gt;&lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.slider{
      position:relative;
      width:100%;
      height:550px;
  }
  .slide{
      background-size:cover;
      background-repeat:no-repeat;
      background-position:center;
      display:none;
      position:absolute;
      top:0;
      left:0;
      width:100%;
  }
  .slide1{
      background-image:url('images/main/slider/1.jpg');
      height:100%
  }
  .slide2{
      background-image:url('images/main/slider/2.jpg');
      height:100%
  }
  .slide3{
      background-image:url('images/main/slider/3.jpg');
      height:100%
  }
  .slide4{
      background-image:url('images/main/slider/4.jpg');
      height:100%
  }
  .active-slide{
      display:block;
  }
  </code></pre>
  
  <p>And finally JAVASCRIPT:</p>
  
  <pre><code>var main = function(){
  
      $('.arrow-next').click(function(){
         var currentSlide = $('.active-slide');
         var nextSlide = currentSlide.next();
  
         if (nextSlide.length == 0){
          nextSlide = $('.slide').first();   
         }
  
         currentSlide.fadeOut(600).removeClass('active-slide');
         nextSlide.fadeIn(600).addClass('active-slide');
  
         currentDot = $('.active-dot');
         nextDot = currentDot.next();
  
         if (nextDot.length == 0){
          nextDot = $('.dot').first();   
         }
  
         currentDot.removeClass('active-dot');
         nextDot.addClass('active-dot');
      });
  
      $('.arrow-prev').click(function(){
         var currentSlide = $('.active-slide');
         var prevSlide = currentSlide.prev();
  
         if (prevSlide.length == 0){
          prevSlide = $('.slide').last();   
         }
  
         currentSlide.fadeOut(600).removeCLass('active-slide');
         prevSlide.fadeIn(600).addClass('active-slide');
  
         currentDot = $('.active-dot');
         prevDot = currentDot.prev();
  
         if (prevDot.lenth == 0){
          prevDot = $('.dot').last();
         }
  
         currentDot.removeClass('active-dot');
         prevDot.addClass('active-dot');
      });
  };
  
  $(document).ready(main);
  </code></pre>