title: How to add a pause button into a Jquery image slider?
body: <p>I'm making an image slider for a site I'm building for my college course and I'm having trouble getting it to work.
  I'm pretty new to using JQuery so please keep it simple. </p>
  
  <p>I've found some code with will allow images to slide which is looped. I'm wanting to add a pause button to it but my efforts have failed so far. 
  This is what I have so far.</p>
  
  <pre><code>    var pause = 'inactive';
  
  if (pause === 'inactive'){
      setInterval(function() {
      var nextItem = $('.image.active').fadeOut(1000).removeClass('active').next('.image');
  
      if (nextItem.length === 0) {
          nextItem = $('.image').first();
      }
  
      nextItem.fadeIn(1000).addClass('active ');
      }, 3500);
  }
  
  
  $('#pause').click(function(){
      pause = 'active' 
  });
  </code></pre>
  
  <p>The looping works, but the pause button doesn't.
  All help is appreciated. Also sorry if its a simple mistake I've over looked.
  P.S. Using the latest version of JQuery (2.0.3)</p>