demo.html

<!DOCTYPE html>
<!--[if lt IE 7 ]> <html lang="en" class="ie"> <![endif]-->
<!--[if IE 7 ]>    <html lang="en" class="ie"> <![endif]-->
<!--[if IE 8 ]>    <html lang="en" class="ie"> <![endif]-->
<!--[if IE 9 ]>    <html lang="en" class="ie"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html lang="en"> <!--<![endif]-->
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
		
		<title>Carousel Plugin</title>
		<meta name="description" content="There are many like it, but this one is mine." />
		
		<style type="text/css" media="screen">
			body { padding-bottom: 5em; }
			ul { margin: 0; padding: 0; list-style: none; }
			
			.carousel-tabs { clear: both; }
			.carousel-active-tab { color: red; }	
			.carousel-disabled,
			.mr-rotato-disabled { color: #aaa; }

			.slidewrap2 .carousel-tabs {
				padding: 0;
				margin: 1em 0;
				clear: both;
			}
			.slidewrap2 .carousel-tabs li {
			    display: inline-block; 
			    padding: 0 2px;
			}
			.slidewrap2 .carousel-tabs a {
			    background: #ddd;
			    display: inline-block;
			    height: 10px;
			    text-indent: -9999px;
			    width: 10px;
			    border-radius: 5px;
			}
			.ie .slidewrap2 .carousel-tabs li,
			.ie .slidewrap2 .carousel-tabs a { 
				display: block;
				float: left;
			}
			.slidewrap2 .carousel-tabs .carousel-active-tab a {
				background: #777;
			}
			
			.events {
				font: normal 11px/1.4 arial, helvetica, sans-serif;
			}
			
		</style>
	</head>
	<body>
	
	<div class="slidewrap" data-autorotate="5000">
		<ul class="slidecontrols">
			<li><a href="#sliderName" class="next">Next</a></li>
			<li><a href="#sliderName" class="prev">Prev</a></li>
		</ul>
		<ul class="slider" id="sliderName">
			<li class="slide">	
				<h2 class="slidehed">First Slide</h2>
				<p>In hac habitasse platea dictumst. Nam pulvinar, odio sed rhoncus suscipit, sem diam ultrices mauris, eu consequat purus metus eu velit. Proin metus odio, aliquam eget molestie nec, gravida ut sapien. Phasellus quis est sed turpis sollicitudin venenatis sed eu odio. Praesent eget neque eu eros interdum malesuada non vel leo. Sed fringilla porta ligula egestas tincidunt. Nullam risus magna, ornare vitae varius eget, scelerisque a libero.</p>
			</li>
			<li class="slide">	
				<h2 class="slidehed"><a href="#">Second Slide</a></h2>
				<p>In hac habitasse platea dictumst. Nam pulvinar, odio sed rhoncus suscipit, sem diam ultrices mauris, eu consequat purus metus eu velit. Proin metus odio, aliquam eget molestie nec, gravida ut sapien.</p>
			</li>
			<li class="slide">	
				<h2 class="slidehed">Third Slide</h2>
				<p>Phasellus quis est sed turpis sollicitudin venenatis sed eu odio. Praesent eget neque eu eros interdum malesuada non vel leo. Sed fringilla porta ligula egestas tincidunt. Nullam risus magna, ornare vitae varius eget.</p>
			</li>
			<li class="slide">	
				<h2 class="slidehed"><a href="#">Fourth Slide</a></h2>
				<p>In hac habitasse platea dictumst. Nam pulvinar, odio sed rhoncus suscipit, sem diam ultrices mauris, eu consequat purus metus eu velit. Proin metus odio, aliquam eget molestie nec, gravida ut sapien. Phasellus quis est sed turpis sollicitudin venenatis sed eu odio.</p>
			</li>
			<li class="slide">	
				<h2 class="slidehed">Fif' Slide</h2>
				<p>In hac habitasse platea dictumst. Nam pulvinar, odio sed rhoncus suscipit, sem diam ultrices mauris, eu consequat purus metus eu velit. Proin metus odio, aliquam eget molestie nec, gravida ut sapien.</p>
			</li>
		</ul>
	</div>
	
	<div class="slidewrap2">
		<ul class="slider">
			<li class="slide">	
				<h2>First Slide</h2>
				<p>In hac habitasse platea dictumst. Nam pulvinar, odio sed rhoncus suscipit, sem diam ultrices mauris, eu consequat purus metus eu velit. Proin metus odio, aliquam eget molestie nec, gravida ut sapien. Phasellus quis est sed turpis sollicitudin venenatis sed eu odio. Praesent eget neque eu eros interdum malesuada non vel leo. Sed fringilla porta ligula egestas tincidunt. Nullam risus magna, ornare vitae varius eget, scelerisque a libero.</p>
			</li>
			<li class="slide">	
				<h2>Second Slide</h2>
				<p>In hac habitasse platea dictumst. Nam pulvinar, odio sed rhoncus suscipit, sem diam ultrices mauris, eu consequat purus metus eu velit. Proin metus odio, aliquam eget molestie nec, gravida ut sapien.</p>
			</li>
			<li class="slide">	
				<h2>Third Slide</h2>
				<p>Phasellus quis est sed turpis sollicitudin venenatis sed eu odio. Praesent eget neque eu eros interdum malesuada non vel leo. Sed fringilla porta ligula egestas tincidunt. Nullam risus magna, ornare vitae varius eget.</p>
			</li>
			<li class="slide">	
				<h2>Fourth Slide</h2>
				<p>In hac habitasse platea dictumst. Nam pulvinar, odio sed rhoncus suscipit, sem diam ultrices mauris, eu consequat purus metus eu velit. Proin metus odio, aliquam eget molestie nec, gravida ut sapien. Phasellus quis est sed turpis sollicitudin venenatis sed eu odio.</p>
			</li>
			<li class="slide">	
				<h2>Fif' Slide</h2>
				<p>In hac habitasse platea dictumst. Nam pulvinar, odio sed rhoncus suscipit, sem diam ultrices mauris, eu consequat purus metus eu velit. Proin metus odio, aliquam eget molestie nec, gravida ut sapien.</p>
			</li>
		</ul>
	</div>
	
	<div class="slidewrap3">
		<ul class="slider">
			<li class="slide">	
				<h2>First Slide</h2>
				<p>In hac habitasse platea dictumst. Nam pulvinar, odio sed rhoncus suscipit, sem diam ultrices mauris, eu consequat purus metus eu velit. Proin metus odio, aliquam eget molestie nec, gravida ut sapien. Phasellus quis est sed turpis sollicitudin venenatis sed eu odio. Praesent eget neque eu eros interdum malesuada non vel leo. Sed fringilla porta ligula egestas tincidunt. Nullam risus magna, ornare vitae varius eget, scelerisque a libero.</p>
			</li>
			<li class="slide">	
				<h2>Second Slide</h2>
				<p>In hac habitasse platea dictumst. Nam pulvinar, odio sed rhoncus suscipit, sem diam ultrices mauris, eu consequat purus metus eu velit. Proin metus odio, aliquam eget molestie nec, gravida ut sapien.</p>
			</li>
			<li class="slide">	
				<h2>Third Slide</h2>
				<p>Phasellus quis est sed turpis sollicitudin venenatis sed eu odio. Praesent eget neque eu eros interdum malesuada non vel leo. Sed fringilla porta ligula egestas tincidunt. Nullam risus magna, ornare vitae varius eget.</p>
			</li>
			<li class="slide">	
				<h2>Fourth Slide</h2>
				<p>In hac habitasse platea dictumst. Nam pulvinar, odio sed rhoncus suscipit, sem diam ultrices mauris, eu consequat purus metus eu velit. Proin metus odio, aliquam eget molestie nec, gravida ut sapien. Phasellus quis est sed turpis sollicitudin venenatis sed eu odio.</p>
			</li>
			<li class="slide">	
				<h2>Fif' Slide</h2>
				<p>In hac habitasse platea dictumst. Nam pulvinar, odio sed rhoncus suscipit, sem diam ultrices mauris, eu consequat purus metus eu velit. Proin metus odio, aliquam eget molestie nec, gravida ut sapien.</p>
			</li>
		</ul>
	</div>
	
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>


	<script src="plugin.js"></script>
	<script>
		$(document).ready(function() {
			$('.slidewrap').carousel({
				slider: '.slider',
				slide: '.slide',
				slideHed: '.slidehed',
				nextSlide : '.next',
				prevSlide : '.prev',
				addPagination: true,
				addNav : false
			});
			
			$('.slidewrap2').carousel({
				slider: '.slider',
				slide: '.slide',
				addNav: false,
				addPagination: true,
				speed: 300 // ms.
			});
			
			$('.slidewrap3').carousel({ 
					namespace: "mr-rotato" // Defaults to “carousel”.
				})
				.bind({
					'mr-rotato-beforemove' : function() {
						$('.events').append("<li>“beforemove” event fired.</li>");
					},
					'mr-rotato-aftermove' : function() {
						$('.events').append("<li>“aftermove” event fired.</li>");
					}
				})
				.after('<ul class="events">Events</ul>');
		});
	</script>
	</body>
</html>