Source

JQuery Infinite Drag Carousel / demo / advanced_demo.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>JQuery infinite Drag Carousel Advanced Demo</title>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

		<link rel="stylesheet" href="css/jquery.infinite-drag-carousel.css" type="text/css" media="screen" />
		<script type="text/javascript" src="js/jquery.js"></script>

		<script type="text/javascript" src="js/jquery.event.drag-2.2.js"></script>
		<script type="text/javascript" src="../jquery.infinite-drag-carousel.js"></script>
		<script type="text/javascript">
			jQuery(document).ready(function(){
				jQuery('#viewport').carousel('#simplePrevious', '#simpleNext');  
				jQuery('#viewport2').carousel('#simplePrevious', '#simpleNext', false);  
			});
		</script>

	</head>
	<body class="deco">	
		<div id="container">
		<h1>JQuery infinite Drag Carousel Advanced Demo</h1>	

		<p>This is a better looking example of the carousel. Also, as you can see, the second row does not have drag enabled. You can disable it by just adding another parameter with a false value. </p> <p><em>Example: jQuery('#viewport').carousel('#simplePrevious', '#simpleNext', false);</em>


			<div id="viewport" class="scrollable">
			<ul>
				<li>T</li>
				<li>W</li>
				<li>I</li>
				<li>S</li>
				<li>T</li>
				<li>E</li>
				<li>D</li>
			</ul>
			</div>

			<div id="viewport2" class="scrollable">
			<ul>
				<li>P</li>
				<li>O</li>
				<li>T</li>
				<li>I</li>
				<li>O</li>
				<li>N</li>
				<li>S</li>
			</ul>
			</div>
			<p style="text-align:center">
				<a id="simplePrevious">&larr; Previous</a>
				<a id="simpleNext">Next &rarr;</a>
			</p>
		</div>
	</body>
</html>