Я не могу заставить это слайд-шоу JQuery работать

Я слежу за учебниками, потому что хотел научиться рисовать карусель/слайд-шоу самостоятельно, но я не могу заставить работать. Это тот, который до сих пор имеет наибольший смысл, но он все еще не работает. Кто-нибудь сможет помочь?

Вот моя скрипка: http://jsfiddle.net/NLDAX/

HTML:

<div id="slideshow">
    <ul>
        <li><img class="slide" src="http://i.imgur.com/zjynAaQ.jpg"  /></li>
        <li><img class="slide" src="http://i.imgur.com/jxHZA2o.jpg"  /></li>
        <li><img class="slide" src="http://i.imgur.com/zn6DmkV.jpg"  /></li>
    </ul>
</div>

CSS:

#slideshow {
    width: 804px;
    height: 312px;
    margin: 100px auto 50px auto;
    position: relative;
    box-shadow: 0 0 20px rgba(0,0,0,0.4);
    overflow: hidden;
}

.slide {
    width: 100%;
}

#slideshow li {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 8;
}

#slideshow img.active {
    z-index: 10;
}

#slideshow img.last-active {
    z-index: 9;
}

Javascript

$(document).ready(function() {
        // settings
      var $slider = $('#slideshow ul'); // class or id of carousel slider
      var $slide = '#slideshow li'; // could also use 'img' if you're not using a ul
      var $transition_time = 1000; // 1 second
      var $time_between_slides = 4000; // 4 seconds

      function slides(){
        return $slider.find($slide);
      }

      slides().fadeOut();

      // set active classes
      slides().first().addClass('active');
      slides().first().fadeIn($transition_time);

      // auto scroll 
      $interval = setInterval(
        function(){
          var $i = $slider.find($slide + '.active').index();

          slides().eq($i).removeClass('active');
          slides().eq($i).fadeOut($transition_time);

          if (slides().length == $i + 1) $i = -1; // loop to start

          slides().eq($i + 1).fadeIn($transition_time);
          slides().eq($i + 1).addClass('active');
        }
        , $transition_time +  $time_between_slides 
      );

});