Rotating Selectable Slideshow

This is the third post in the rotating content and tabs series that explores CSS, JavaScript, HTML and JQuery. This time we create a news rotator with slide index, next and previous buttons, auto forward, and a play/pause button. Moreover, it degrafes fairly nicely without JavaScript turned on, which should lend itself to decent accessibility by screen readers and other assistive technologies. It can currently be seen on this test page: https://cms.uwm.edu/letsci/chemistry/testslider.cfm.

The CSS:

#slideshow #slidesContainer 
{
  margin:0 auto;
  width:560px;
  height:263px;
  overflow:auto; /* allow scrollbar when no JS. you may want to add instead overflow-x:hidden; overflow-y: scroll;*/
  position:relative;
}

#slideshow #slidesContainer .slide 
{
  margin:0 auto;
  width:580px; /* reduce by 20 pixels to avoid horizontal scroll */
  height:150px;
}

.control 
{
  display:block;
  width:39px;
  height:263px;
  text-indent:-10000px;
  position:absolute;
  cursor: pointer;
}

#leftControl 
{
  top:0;
  left:0;
  background:transparent url(/letsci/assets/images/testprev.png) no-repeat 0 0;
}

#rightControl
{
  top:0;
  right:0;
  background:transparent url(/letsci/assets/images/testnext.png) no-repeat 0 0;
}

a.slidelinks, 
a.playpause
{
  color: #ff0505;
}

.slideDesc 
{
  position:relative;
  top:-20px;
  height:20px;
  background:black;
  opacity:0.7;
  filter:alpha(opactiy=70);
  color:white;
}

.slideindex 
{
  display: block;
  float: right;
  margin-right: 130px;
}

The HTML:

<div id="slideshow">
  <div id="slidesContainer">

    <div class="slide">
      <a href="http://jastreich.com/"><img src="images/1.png" alt="Image alt" /></a>
      <div class="slideDesc">Slide 1.
      <span class="slideindex">
        <b>1</b>
        <a class="slidelinks" href="javascript:" onclick="pause();gotoslide(1);">2</a>
        <a class="playpause" href="javascript:" onclick="toggle_pause();">Pause</a></span>
    </div>

    <div class="slide">
      <a href="http://slashdot.org/"><img src="images/2.png" alt="Image alt" /></a>
      <div class="slideDesc">Slide 2.
      <span class="slideindex">
        <a class="slidelinks" href="javascript:" onclick="pause();gotoslide(0);">1</a>
        <b>2</b>
        <a class="playpause" href="javascript:" onclick="toggle_pause();">Pause</a></span>
    </div>

  </div>
</div>

The JavaScript:

  var currentPosition = 0;
  var slideWidth = 600;
  var slides = $('.slide');
  var numberOfSlides = slides.length;
  var paused = false;

  // Remove scrollbar in JS
  $('#slidesContainer').css('overflow', 'hidden');

  // Wrap all .slides with #slideInner div
  slides
  .wrapAll('<div id="slideInner"></div>')

  // Float left to display horizontally, readjust .slides width
  .css({
    'float' : 'left',
    'width' : slideWidth
  });

  // Set #slideInner width equal to total width of all slides
  $('#slideInner').css('width', slideWidth * numberOfSlides);

  // Insert left and right arrow controls in the DOM
  $('#slideshow')
    .prepend('<span class="control" id="leftControl">Move left</span>')
    .append('<span class="control" id="rightControl">Move right</span>');

  // Hide left arrow control on first load
  manageControls(currentPosition);

  // Create event listeners for .controls clicks
  $('.control')
    .bind('click', function(){
    // Determine new position
      currentPosition = ($(this).attr('id')=='rightControl')
    ? currentPosition+1 : currentPosition-1;

      // Hide / show controls
      manageControls(currentPosition);
      // Move slideInner using margin-left
      $('#slideInner').animate({
        'marginLeft' : slideWidth*(-currentPosition)
      });
    });

  // Advance on time -- autoforward
  function timeForward()
  {
    if(!paused)
    {
      if(currentPosition + 1 < numberOfSlides)
      {
        gotoslide(currentPosition + 1);
      }
      else
      {
        gotoslide(0);
      }
      setTimeout("timeForward()",3000);
    }
  }

  // Swtich from play to pause
  function toggle_pause()
  {
    if(paused)
    {
      play();
    }
    else
    {
      pause();
    }
  }

  function pause()
  {
      //stop advance, switch button text.
      paused = true;
      $('.playpause').html('play');
  }

  function play()
  {
      //start advance, switch button text.
      paused = false;
      $('.playpause').html('Pause');
      timeForward();
  }

  // manageControls: Hides and shows controls depending on currentPosition
  function manageControls(position)
  {
    // Hide left arrow if position is first slide
    if(position==0){ $('#leftControl').hide() }
    else{ $('#leftControl').show() }
    // Hide right arrow if position is last slide
    if(position==numberOfSlides-1){ $('#rightControl').hide() }
    else{ $('#rightControl').show() }
  }

  // Go to a given slide.
  function gotoslide(i)
  {
    currentPosition = i;
    manageControls(currentPosition);
      $('##slideInner').animate({
        'marginLeft' : slideWidth*(-currentPosition)
      });
  }

  // Start auto advance.
  setTimeout("timeForward()",3000);