title: jQuery Content Slider Auto Scroll
body: <p>I have used the code from brenelz.com/2009/03/31/build-a-content-slider-with-jquery/ tutorial and have a functional content slider. </p>
  
  <p>I now would like the content to auto slide and have tried using javaScript setInterval(). I have been unable to figure it out. Any help would be appreciated.</p>
  
  <pre><code>(function($) {
    $.fn.ContentSlider = function(options)
    {
      var defaults = {
        leftBtn : 'images/cs_leftImg.jpg',
        rightBtn : 'images/cs_rightImg.jpg',
        width : '900px',
        height : '400px',
        speed : 400,
        easing : 'easeOutQuad',
        textResize : false,
        IE_h2 : '26px',
        IE_p : '11px'
      }
      var defaultWidth = defaults.width;
      var o = $.extend(defaults, options);
      var w = parseInt(o.width);
      var n = this.children('.cs_wrapper').children('.cs_slider').children('.cs_article').length;
      var x = -1*w*n+w; // Minimum left value
      var p = parseInt(o.width)/parseInt(defaultWidth);
      var thisInstance = this.attr('id');
      var inuse = false; // Prevents colliding animations
  
      function moveSlider(d, b)
      {
        var l = parseInt(b.siblings('.cs_wrapper').children('.cs_slider').css('left'));
        if(isNaN(l)) {
          var l = 0;
        }
        var m = (d=='left') ? l-w : l+w;
        if(m&lt;=0&amp;&amp;m&gt;=x) {
          b
            .siblings('.cs_wrapper')
              .children('.cs_slider')
                .animate({ 'left':m+'px' }, o.speed, o.easing, function() {
                  inuse=false;
                });
  
          if(b.attr('class')=='cs_leftBtn') {
            var thisBtn = $('#'+thisInstance+' .cs_leftBtn');
            var otherBtn = $('#'+thisInstance+' .cs_rightBtn');
          } else {
            var thisBtn = $('#'+thisInstance+' .cs_rightBtn');
            var otherBtn = $('#'+thisInstance+' .cs_leftBtn');
          }
          if(m==0||m==x) {
            thisBtn.animate({ 'opacity':'0' }, o.speed, o.easing, function() { thisBtn.hide(); });
          }
          if(otherBtn.css('opacity')=='0') {
            otherBtn.show().animate({ 'opacity':'1' }, { duration:o.speed, easing:o.easing });
          }
        }
      }
  
      function vCenterBtns(b)
      {
        // Safari and IE don't seem to like the CSS used to vertically center
        // the buttons, so we'll force it with this function
        var mid = parseInt(o.height)/2;
        b
          .find('.cs_leftBtn img').css({ 'top':mid+'px', 'padding':0 }).end()
          .find('.cs_rightBtn img').css({ 'top':mid+'px', 'padding':0 });
      }
  
      return this.each(function() {
        $(this)
          // Set the width and height of the div to the defined size
          .css({
            width:o.width,
            height:o.height
          })
          // Add the buttons to move left and right
          .prepend('&lt;a href="#" class="cs_leftBtn"&gt;&lt;img src="'+o.leftBtn+'" /&gt;&lt;/a&gt;')
          .append('&lt;a href="#" class="cs_rightBtn"&gt;&lt;img src="'+o.rightBtn+'" /&gt;&lt;/a&gt;')
          // Dig down to the article div elements
          .find('.cs_article')
            // Set the width and height of the div to the defined size
            .css({
              width:o.width,
              height:o.height
            })
            .end()
          // Animate the entrance of the buttons
          .find('.cs_leftBtn')
            .css('opacity','0')
            .hide()
            .end()
          .find('.cs_rightBtn')
            .hide()
            .animate({ 'width':'show' });
  
        // Resize the font to match the bounding box
        if(o.textResize===true) {
          var h2FontSize = $(this).find('h2').css('font-size');
          var pFontSize = $(this).find('p').css('font-size');
          $.each(jQuery.browser, function(i) {
            if($.browser.msie) {
               h2FontSize = o.IE_h2;
               pFontSize = o.IE_p;
            }
          });
          $(this).find('h2').css({ 'font-size' : parseFloat(h2FontSize)*p+'px', 'margin-left' : '66%' });
          $(this).find('p').css({ 'font-size' : parseFloat(pFontSize)*p+'px', 'margin-left' : '66%' });
          $(this).find('.readmore').css({ 'font-size' : parseFloat(pFontSize)*p+'px', 'margin-left' : '66%' });
        }
  
        // Store a copy of the button in a variable to pass to moveSlider()
        var leftBtn = $(this).children('.cs_leftBtn');
        leftBtn.bind('click', function() {
          if(inuse===false) {
            inuse = true;
            moveSlider('right', leftBtn);
          }
          return false; // Keep the link from firing
        });
  
        // Store a copy of the button in a variable to pass to moveSlider()
        var rightBtn = $(this).children('.cs_rightBtn');
        rightBtn.bind('click', function() {
          if(inuse===false) {
            inuse=true;
            moveSlider('left', rightBtn);
          }
          return false; // Keep the link from firing
        });
  
        vCenterBtns($(this)); // This is a CSS fix function.
      });
    }
  })(jQuery)
  </code></pre>