Uncaught TypeError

Hello All,

I recently installed a simple jquery slideshow on my new website.

I placed the following code in the header:

<script type="text/javascript" src="../outplaypoker/js/slidedeck/slidedeck.jquery.lite.pack.js"></script>
<script type="text/javascript" src="../outplaypoker/js/slidedeck/jquery-mousewheel/jquery.mousewheel.min.js"></script>
<link rel="stylesheet" type="text/css" href="../outplaypoker/skin/frontend/default/outplay_black/css/slidedeck.skin.css" media="screen" />
<style type="text/css">
	#slidedeck_frame {
		width: 901px;
		height: 300px;
	}        
</style>

Code (markup):

I placed the following code on the index page:

<div id="slidedeck_frame" class="skin-slidedeck">
			<dl class="slidedeck">
				<dt>Slide 1</dt>
				<dd>
				    <h2>Slide 1</h2>
                    <h3>Ut eros ligula, dignissim varius elementum eu, bibendum sed</h3>
				    Sed dapibus iaculis risus non sollicitudin. Aliquam sodales tempus imperdiet. Ut ante neque, pharetra at adipiscing eget, molestie ut leo. Suspendisse eget erat ut libero adipiscing euismod. Vestibulum auctor lectus nisl, sit amet gravida elit. Nullam hendrerit, eros nec elementum placerat, ligula tortor dapibus mi, a congue tortor lacus vitae sem. Vestibulum ante ipsum primis in faucibus orci luctus et.
                </dd>
				<dt>Slide 2</dt>
				<dd>
                    <h2>Slide 2</h2>
                    <h3>Etiam hendrerit egestas tincidunt. Phasellus ut ante in sed.</h3>
				    Ut non augue libero. Quisque consequat suscipit tempor. Nulla vitae feugiat augue. Nunc quis dolor magna. Aliquam et purus non dui interdum interdum. Cras ut risus vitae arcu luctus eleifend. Proin ac dolor ut diam consequat facilisis a a turpis. Duis interdum mattis varius. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Maecenas id nunc.
                </dd>
				<dt>Slide 3</dt>
				<dd>
                    <h2>Slide 3</h2>
                    <h3>Integer molestie gravida nisl, vitae sollicitudin cras amet.</h3>
				    Suspendisse libero arcu, volutpat ac dignissim in, ultrices sit amet neque. In arcu dui, dignissim sit amet feugiat vitae, dignissim in dolor. Etiam at nulla erat. Fusce tincidunt, augue vitae laoreet ornare, lectus dolor ullamcorper quam, a ullamcorper massa tortor id magna. Fusce lobortis orci eget eros ultricies tempor. Sed ultrices enim a magna facilisis commodo. Sed diam risus, hendrerit.
                </dd>
				<dt>Slide 4</dt>
				<dd>
                    <h2>Slide 4</h2>
                    <h3>Quisque et diam ac ante rhoncus iaculis non id urna posuere.</h3>
				    Quisque at magna in diam lacinia placerat id non odio. Praesent sit amet iaculis ligula. Suspendisse at mauris sed lectus laoreet tristique. Praesent vitae est in arcu sodales tincidunt quis aliquet ante. Nulla cursus fermentum tempus. Fusce sit amet diam vitae leo ornare sodales id vitae purus. Phasellus sodales quam et nisl dapibus at laoreet magna bibendum. Curabitur ante urna.
                </dd>
			</dl>
		</div>

<script type="text/javascript">
	jQuery.noConflict();
	$('.slidedeck').slidedeck({
		autoPlay: true,
		cycle: true, 
		autoPlayInterval: 2500, // 2.5 seconds
		hideSpines: true
	});
</script>

Code (markup):

Now when I navigate to the homepage I get all the slides lined up down the page (not each slide rotating like it should be). When I inspected the element a little further I got the error "Uncaught TypeError: cannot call method "slidedeck" of null".

Any clue as to why this is not working or as to what this error means?

Best Regards,
Nick