Source

mealrevolution / design / sd / example-spineless.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
		<title>SlideDeck v.1.2.1 Lite Example</title>

        <!-- Include jQuery first. -->
		<script type="text/javascript" src="jquery-1.3.2.min.js"></script>

        <!-- Include the below script, Copyright 2010, Brandon Aaron (http://brandonaaron.net/) for scrollwheel support. -->
		<script type="text/javascript" src="jquery-mousewheel/jquery.mousewheel.min.js"></script>
		
		<link rel="stylesheet" type="text/css" href="slidedeck.skin.css" media="screen" />
        <!-- Styles for the skin that only load for Internet Explorer -->
        <!--[if IE]>
        <link rel="stylesheet" type="text/css" href="slidedeck.skin.ie.css" media="screen,handheld" />
        <![endif]-->
		
        <!-- Include the SlideDeck jQuery script. -->
		<script type="text/javascript" src="slidedeck.jquery.lite.pack.js"></script>
        
        <style type="text/css">
            #slidedeck_frame {
                width: 901px;
                height: 300px;
            }        
        </style>
	</head>
	<body>
		<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>
        <h4>Use the scroll wheel on the mouse or the left and right arrows on your keyboard to navigate.</h4>
		<script type="text/javascript">
			$('.slidedeck').slidedeck({
                autoPlay: true,
                cycle: true, 
                autoPlayInterval: 2500, // 2.5 seconds
                hideSpines: true
            });
		</script>
	    <!-- Help support SlideDeck! Place this noscript tag on your page when you deploy a SlideDeck to provide a link back! -->
		<noscript>
		     <p>Powered By <a href="http://www.slidedeck.com" title="Visit SlideDeck.com">SlideDeck</a></p>
        </noscript>
	</body>
</html>