How can I add jQuery Slideshow controls?

JavaScript
1

Hi everyone,

I have set up a simple gallery slideshow which auto fades into the next image after 10 seconds.

What I would ideally like to do is have three buttons, each of them stops that auto transition, one of them then allows moving back an image, one moves forward an image, and another play/pauses the slideshow.

Is this possible?

I have the basic slideshow here:

Web Design & Photography, based in Worthing, West Sussex - pelli Creative

The code is as follows:


function slideSwitch() {
		    var $active = $('#slideshow IMG.active');

		    if ( $active.length == 0 ) $active = $('#slideshow IMG:last');

		    // use this to pull the images in the order they appear in the markup
		    var $next =  $active.next().length ? $active.next()
		        : $('#slideshow IMG:first');

		    // uncomment the 3 lines below to pull the images in random order
    
		    // var $sibs  = $active.siblings();
		    // var rndNum = Math.floor(Math.random() * $sibs.length );
		    // var $next  = $( $sibs[ rndNum ] );


		    $active.addClass('last-active');

		    $next.css({opacity: 0.0})
		        .addClass('active')
        		.animate({opacity: 1.0}, 1000, function() {
            		$active.removeClass('active last-active');
        		});
		}

		$(function() {
		    setInterval( "slideSwitch()", 10000 );
		});
		



<div id="slideshow">
    		<div>
    			<img src="images/content/portfolio/photography/portrait/img1.jpg" alt="Slideshow Image 1" class="active" />
	    		<img src="images/content/portfolio/photography/portrait/img2.jpg" alt="Slideshow Image 2" />
	    		<img src="images/content/portfolio/photography/portrait/img3.jpg" alt="Slideshow Image 3" />
	    	</div>
		</div>
		<div id="controls">
			<p><a href="#">Back an image</a> / <a href="#">Pause/Play Slideshow</a> / <a href="#">Forward an image</a></p>
		</div><!--controls-->



#slideshow {
    position:relative;
    height:641px;
}

#slideshow img {
    position:absolute;
    top:11px;
    left:11px;
    z-index:8;
    opacity:0.0;
}

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

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

Many thanks for any help you can give, really appreciate it.