<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Circular Content Carousel with jQuery</title>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
		<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
        <meta name="description" content="Circular Content Carousel with jQuery" />
        <meta name="keywords" content="jquery, conent slider, content carousel, circular, expanding, sliding, css3" />
		<meta name="author" content="Codrops" />
		<link rel="shortcut icon" href="../favicon.ico"> 
        <link rel="stylesheet" type="text/css" href="css/demo.css" />
		<link rel="stylesheet" type="text/css" href="css/style.css" />
		<link rel="stylesheet" type="text/css" href="css/jquery.jscrollpane.css" media="all" />
		<link href='http://fonts.googleapis.com/css?family=PT+Sans+Narrow&v1' rel='stylesheet' type='text/css' />
		<link href='http://fonts.googleapis.com/css?family=Coustard:900' rel='stylesheet' type='text/css' />
		<link href='http://fonts.googleapis.com/css?family=Rochester' rel='stylesheet' type='text/css' />
    </head>
	<style>
			@import url('reset.css');

		/* General Demo Style */
		body{
			background:#e4ebe9 url(../images/pattern.png) repeat top left;
			color:#000;
			font-family: 'PT Sans Narrow', Arial, sans-serif;
			font-size:12px;
		}
		a{
			color:#000;
			text-decoration:none;
		}
		.clr{
			clear:both;
		}
		h1, h5{
			margin:15px;
			font-size:44px;
			color:#000;
			font-family: 'Rochester', sans-serif;
			text-shadow:1px 1px 1px #fff;
			text-align:center;
		}
		h1 span, h5{
			font-size:20px;
			display:block;
			color:#60817a;
		}
		/* Header Style */
		.header{
			height:25px;
			line-height:24px;
			font-size:13px;
			background:#000;
			opacity:0.9;
			text-transform:uppercase;
			z-index:4;
		}
		.header a{
			padding:5px 10px;
			letter-spacing:1px;
			text-shadow:1px 1px 1px #000;
			color:#ddd;
			text-align:right;
		}
		.header a:hover{
			color:#fff;
		}
		.header a span{
			font-weight:bold;
		}
		.header span.right_ab{
			position:absolute;
			right:4px;
		}
				/*
		 * CSS Styles that are needed by jScrollPane for it to operate correctly.
		 *
		 * Include this stylesheet in your site or copy and paste the styles below into your stylesheet - jScrollPane
		 * may not operate correctly without them.
		 */

		.jspContainer
		{
			overflow: hidden;
			position: relative;
		}

		.jspPane
		{
			position: absolute;
		}

		.jspVerticalBar
		{
			position: absolute;
			top: 0;
			right: 0;
			width: 10px;
			height: 100%;
			background: #fff;

		}

		.jspHorizontalBar
		{
			position: absolute;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 10px;
			background: #fff;
		}

		.jspVerticalBar *,
		.jspHorizontalBar *
		{
			margin: 0;
			padding: 0;
		}

		.jspCap
		{
			display: none;
		}

		.jspHorizontalBar .jspCap
		{
			float: left;
		}

		.jspTrack
		{
			background: #fff;
			position: relative;
		}

		.jspDrag
		{
			background: #000;
			position: relative;
			top: 0;
			left: 0;
			cursor: pointer;
		}

		.jspHorizontalBar .jspTrack,
		.jspHorizontalBar .jspDrag
		{
			float: left;
			height: 100%;
		}

		.jspArrow
		{
			background: #50506d;
			text-indent: -20000px;
			display: block;
			cursor: pointer;
		}

		.jspArrow.jspDisabled
		{
			cursor: default;
			background: #80808d;
		}

		.jspVerticalBar .jspArrow
		{
			height: 10px;
		}

		.jspHorizontalBar .jspArrow
		{
			width: 10px;
			float: left;
			height: 100%;
		}

		.jspVerticalBar .jspArrow:focus
		{
			outline: none;
		}

		.jspCorner
		{
			background: #eeeef4;
			float: left;
			height: 100%;
		}

		/* Yuk! CSS Hack for IE6 3 pixel bug :( */
		* html .jspCorner
		{
			margin: 0 -3px 0 0;
		}
				/* CSS reset */
		body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { 
			margin:0;
			padding:0;
		}
		html,body {
			margin:0;
			padding:0;
		}
		table {
			border-collapse:collapse;
			border-spacing:0;
		}
		fieldset,img { 
			border:0;
		}
		input{
			border:1px solid #b0b0b0;
			padding:3px 5px 4px;
			color:#979797;
			width:190px;
		}
		address,caption,cite,code,dfn,th,var {
			font-style:normal;
			font-weight:normal;
		}
		ol,ul {
			list-style:none;
		}
		caption,th {
			text-align:left;
		}
		h1,h2,h3,h4,h5,h6 {
			font-size:100%;
			font-weight:normal;
		}
		q:before,q:after {
			content:'';
		}
		abbr,acronym { border:0;
		}
				/* Circular Content Carousel Style */
		.ca-container{
			position:relative;
			margin:25px auto 20px auto;
			width:990px;
			height:450px;
		}
		.ca-wrapper{
			width:100%;
			height:100%;
			position:relative;
		}
		.ca-item{
			position:relative;
			float:left;
			width:330px;
			height:100%;
			text-align:center;
		}
		.ca-more{
			position: absolute;
			bottom: 10px;
			right:0px;
			padding:4px 15px;
			font-weight:bold;
			background: #ccbda2;
			text-align:center;
			color: white;
			font-family: "Georgia","Times New Roman",serif;
			font-style:italic;
			text-shadow:1px 1px 1px #897c63;
		}
		.ca-close{
			position:absolute;
			top:10px;
			right:10px;
			background:#fff url(../images/cross.png) no-repeat center center;
			width:27px;
			height:27px;
			text-indent:-9000px;
			outline:none;
			-moz-box-shadow:1px 1px 2px rgba(0,0,0,0.2);
			-webkit-box-shadow:1px 1px 2px rgba(0,0,0,0.2);
			box-shadow:1px 1px 2px rgba(0,0,0,0.2);
			opacity:0.7;
		}
		.ca-close:hover{
			opacity:1.0;
		}
		.ca-item-main{
			padding:20px;
			position:absolute;
			top:5px;
			left:5px;
			right:5px;
			bottom:5px;
			background:#fff;
			overflow:hidden;
			-moz-box-shadow:1px 1px 2px rgba(0,0,0,0.2);
			-webkit-box-shadow:1px 1px 2px rgba(0,0,0,0.2);
			box-shadow:1px 1px 2px rgba(0,0,0,0.2);
		}
		.ca-icon{
			width:233px;
			height:189px;
			position:relative;
			margin:0 auto;
			background:transparent url(../images/animal1.png) no-repeat center center;
		}
		.ca-item-2 .ca-icon{
			background-image:url(../images/animal2.png);
		}
		.ca-item-3 .ca-icon{
			background-image:url(../images/animal3.png);
		}
		.ca-item-4 .ca-icon{
			background-image:url(../images/animal4.png);
		}
		.ca-item-5 .ca-icon{
			background-image:url(../images/animal5.png);
		}
		.ca-item-6 .ca-icon{
			background-image:url(../images/animal6.png);
		}
		.ca-item-7 .ca-icon{
			background-image:url(../images/animal7.png);
		}
		.ca-item-8 .ca-icon{
			background-image:url(../images/animal8.png);
		}
		.ca-item h3{
			font-family: 'Coustard', sans-serif;
			text-transform:uppercase;
			font-size:30px;
			color:#000;
			margin-bottom:20px;
			height:85px;
			text-align:center;
			text-shadow: 0px 1px 1px #e4ebe9;
		}
		.ca-item h4{
			font-family: "Georgia","Times New Roman",serif;
			font-style:italic;
			font-size:12px;
			text-align:left;
			border-left:10px solid #b0ccc6;
			padding-left:10px;
			line-height:24px;
			margin:10px;
			position:relative;
		}
		.ca-item h4 span{
			text-indent:40px;
			display:block;
		}
		.ca-item h4  span.ca-quote{
			color:#f4eee3;
			font-size:100px;
			position:absolute;
			top:20px;
			left:0px;
			text-indent:0px;
		}
		.ca-content-wrapper{
			background:#b0ccc6;
			position:absolute;
			width:0px; /* expands to width of the wrapper minus 1 element */
			height:440px;
			top:5px;
			text-align:left;
			z-index:10000;
			overflow:hidden;
		}
		.ca-content{
			width:660px;
			overflow:hidden;
		}
		.ca-content-text{
			font-size: 14px;
			font-style: italic;
			font-family: "Georgia","Times New Roman",serif;
			margin:10px 20px;
			padding:10px 20px;
			line-height:24px;
		}
		.ca-content-text p{
			padding-bottom:5px;
		}
		.ca-content h6{
			margin:25px 20px 0px 35px;
			font-size:32px;
			padding-bottom:5px;
			color:#000;
			font-family: 'Coustard', sans-serif;
			color:#60817a;
			border-bottom:2px solid #99bcb4;
			text-shadow: 1px 1px 1px #99BCB4;
		}
		.ca-content ul{
			margin:20px 35px;
			height:30px;
		}
		.ca-content ul li{
			float:left;
			margin:0px 2px;
		}
		.ca-content ul li a{
			color:#fff;
			background:#000;
			padding:3px 6px;
			font-size:14px;
			font-family: "Georgia","Times New Roman",serif;
			font-style:italic;
		}
		.ca-content ul li a:hover{
			background:#fff;
			color:#000;
			text-shadow:none;
		}
		.ca-nav span{
			width:25px;
			height:38px;
			background:transparent url(../images/arrows.png) no-repeat top left;
			position:absolute;
			top:50%;
			margin-top:-19px;
			left:-40px;
			text-indent:-9000px;
			opacity:0.7;
			cursor:pointer;
			z-index:100;
		}
		.ca-nav span.ca-nav-next{
			background-position:top right;
			left:auto;
			right:-40px;
		}
		.ca-nav span:hover{
			opacity:1.0;
		}
	</style>
    <body>
		<div class="container">
			<div class="header">
				<a href="http://tympanus.net/Tutorials/PortfolioImageNavigation/"><span>&laquo; Previous Demo: </span>Portfolio Image Navigation</a>
				<span class="right_ab">
					<a href="http://cyberella74.deviantart.com/art/Archigraphs-Animals-Icons-139629985" target="_blank">Animal Icons by Cyberella</a>
					<a href="http://tympanus.net/codrops/2011/08/16/circular-content-carousel/"><strong>back to the Codrops post</strong></a>
				</span>
			</div>
			<h1>Circular Content Carousel<span>with jQuery</span></h1>
			<div id="ca-container" class="ca-container">
				<div class="ca-wrapper">
					<div class="ca-item ca-item-1">
						<div class="ca-item-main">
							<div class="ca-icon"></div>
							<h3>Stop factory farming</h3>
							<h4>
								<span class="ca-quote">&ldquo;</span>
								<span>The greatness of a nation and its moral progress can be judged by the way in which its animals are treated.</span>
							</h4>
								<a href="#" class="ca-more">more...</a>
						</div>
						<div class="ca-content-wrapper">
							<div class="ca-content">
								<h6>Animals are not commodities</h6>
								<a href="#" class="ca-close">close</a>
								<div class="ca-content-text">
									<p>I am so happy, my dear friend, so absorbed in the exquisite sense of mere tranquil existence, that I neglect my talents. I should be incapable of drawing a single stroke at the present moment; and yet I feel that I never was a greater artist than now.</p>
									<p>When, while the lovely valley teems with vapour around me, and the meridian sun strikes the upper surface of the impenetrable foliage of my trees, and but a few stray gleams steal into the inner sanctuary, I throw myself down among the tall grass by the trickling stream;</p>
									<p>She packed her seven versalia, put her initial into the belt and made herself on the way.</p>
								</div>
								<ul>
									<li><a href="#">Read more</a></li>
									<li><a href="#">Share this</a></li>
									<li><a href="#">Become a member</a></li>
									<li><a href="#">Donate</a></li>
								</ul>
							</div>
						</div>
					</div>
					<div class="ca-item ca-item-2">
						<div class="ca-item-main">
							<div class="ca-icon"></div>
							<h3>Respect Life &amp; Rights</h3>
							<h4>
								<span class="ca-quote">&ldquo;</span>
								<span>I hold that the more helpless a creature, the more entitled it is to protection by man from the cruelty of man.</span>
							</h4>
								<a href="#" class="ca-more">more...</a>
						</div>
						<div class="ca-content-wrapper">
							<div class="ca-content">
								<h6>Would you eat your dog?</h6>
								<a href="#" class="ca-close">close</a>
								<div class="ca-content-text">
									<p>I am so happy, my dear friend, so absorbed in the exquisite sense of mere tranquil existence, that I neglect my talents. I should be incapable of drawing a single stroke at the present moment; and yet I feel that I never was a greater artist than now.</p>
									<p>When, while the lovely valley teems with vapour around me, and the meridian sun strikes the upper surface of the impenetrable foliage of my trees, and but a few stray gleams steal into the inner sanctuary, I throw myself down among the tall grass by the trickling stream;</p>
									<p>She packed her seven versalia, put her initial into the belt and made herself on the way.</p>
								</div>
								<ul>
									<li><a href="#">Read more</a></li>
									<li><a href="#">Share this</a></li>
									<li><a href="#">Become a member</a></li>
									<li><a href="#">Donate</a></li>
								</ul>
							</div>
						</div>
					</div>
					<div class="ca-item ca-item-3">
						<div class="ca-item-main">
							<div class="ca-icon"></div>
							<h3>Become 100% meat-free</h3>
							<h4>
								<span class="ca-quote">&ldquo;</span>
								<span>I feel that spiritual progress does demand at some stage that we should cease to kill our fellow creatures for the satisfaction of our bodily wants.</span>
							</h4>
								<a href="#" class="ca-more">more...</a>
						</div>
						<div class="ca-content-wrapper">
							<div class="ca-content">
								<h6>You can change the world</h6>
								<a href="#" class="ca-close">close</a>
								<div class="ca-content-text">
									<p>I am so happy, my dear friend, so absorbed in the exquisite sense of mere tranquil existence, that I neglect my talents. I should be incapable of drawing a single stroke at the present moment; and yet I feel that I never was a greater artist than now.</p>
									<p>When, while the lovely valley teems with vapour around me, and the meridian sun strikes the upper surface of the impenetrable foliage of my trees, and but a few stray gleams steal into the inner sanctuary, I throw myself down among the tall grass by the trickling stream;</p>
									<p>She packed her seven versalia, put her initial into the belt and made herself on the way.</p>
								</div>
								<ul>
									<li><a href="#">Read more</a></li>
									<li><a href="#">Share this</a></li>
									<li><a href="#">Become a member</a></li>
									<li><a href="#">Donate</a></li>
								</ul>
							</div>
						</div>
					</div>
					<div class="ca-item ca-item-4">
						<div class="ca-item-main">
							<div class="ca-icon"></div>
							<h3>Make a difference</h3>
							<h4>
								<span class="ca-quote">&ldquo;</span>
								<span>A man is but the product of his thoughts what he thinks, he becomes.</span>
							</h4>
								<a href="#" class="ca-more">more...</a>
						</div>
						<div class="ca-content-wrapper">
							<div class="ca-content">
								<h6>Think globally, act locally</h6>
								<a href="#" class="ca-close">close</a>
								<div class="ca-content-text">
									<p>I am so happy, my dear friend, so absorbed in the exquisite sense of mere tranquil existence, that I neglect my talents. I should be incapable of drawing a single stroke at the present moment; and yet I feel that I never was a greater artist than now.</p>
									<p>When, while the lovely valley teems with vapour around me, and the meridian sun strikes the upper surface of the impenetrable foliage of my trees, and but a few stray gleams steal into the inner sanctuary, I throw myself down among the tall grass by the trickling stream;</p>
									<p>She packed her seven versalia, put her initial into the belt and made herself on the way.</p>
								</div>
								<ul>
									<li><a href="#">Read more</a></li>
									<li><a href="#">Share this</a></li>
									<li><a href="#">Become a member</a></li>
									<li><a href="#">Donate</a></li>
								</ul>
							</div>
						</div>
					</div>
					<div class="ca-item ca-item-5">
						<div class="ca-item-main">
							<div class="ca-icon"></div>
							<h3>Say no to killing</h3>
							<h4>
								<span class="ca-quote">&ldquo;</span>
								<span>A weak man is just by accident. A strong but non-violent man is unjust by accident.</span>
							</h4>
								<a href="#" class="ca-more">more...</a>
						</div>
						<div class="ca-content-wrapper">
							<div class="ca-content">
								<h6>Animals have rights, too!</h6>
								<a href="#" class="ca-close">close</a>
								<div class="ca-content-text">
									<p>I am so happy, my dear friend, so absorbed in the exquisite sense of mere tranquil existence, that I neglect my talents. I should be incapable of drawing a single stroke at the present moment; and yet I feel that I never was a greater artist than now.</p>
									<p>When, while the lovely valley teems with vapour around me, and the meridian sun strikes the upper surface of the impenetrable foliage of my trees, and but a few stray gleams steal into the inner sanctuary, I throw myself down among the tall grass by the trickling stream;</p>
									<p>She packed her seven versalia, put her initial into the belt and made herself on the way.</p>
								</div>
								<ul>
									<li><a href="#">Read more</a></li>
									<li><a href="#">Share this</a></li>
									<li><a href="#">Become a member</a></li>
									<li><a href="#">Donate</a></li>
								</ul>
							</div>
						</div>
					</div>
					<div class="ca-item ca-item-6">
						<div class="ca-item-main">
							<div class="ca-icon"></div>
							<h3>Don't believe the lies</h3>
							<h4>
								<span class="ca-quote">&ldquo;</span>
								<span>An error does not become truth by reason of multiplied propagation, nor does truth become error because nobody sees it.</span>
							</h4>
								<a href="#" class="ca-more">more...</a>
						</div>
						<div class="ca-content-wrapper">
							<div class="ca-content">
								<h6>How essential is meat?</h6>
								<a href="#" class="ca-close">close</a>
								<div class="ca-content-text">
									<p>I am so happy, my dear friend, so absorbed in the exquisite sense of mere tranquil existence, that I neglect my talents. I should be incapable of drawing a single stroke at the present moment; and yet I feel that I never was a greater artist than now.</p>
									<p>When, while the lovely valley teems with vapour around me, and the meridian sun strikes the upper surface of the impenetrable foliage of my trees, and but a few stray gleams steal into the inner sanctuary, I throw myself down among the tall grass by the trickling stream;</p>
									<p>She packed her seven versalia, put her initial into the belt and made herself on the way.</p>
								</div>
								<ul>
									<li><a href="#">Read more</a></li>
									<li><a href="#">Share this</a></li>
									<li><a href="#">Become a member</a></li>
									<li><a href="#">Donate</a></li>
								</ul>
							</div>
						</div>
					</div>
					<div class="ca-item ca-item-7">
						<div class="ca-item-main">
							<div class="ca-icon"></div>
							<h3>Save the planet</h3>
							<h4>
								<span class="ca-quote">&ldquo;</span>
								<span>A small body of determined spirits fired by an unquenchable faith in their mission can alter the course of history.</span>
							</h4>
								<a href="#" class="ca-more">more...</a>
						</div>
						<div class="ca-content-wrapper">
							<div class="ca-content">
								<h6>Collateral damage?</h6>
								<a href="#" class="ca-close">close</a>
								<div class="ca-content-text">
									<p>I am so happy, my dear friend, so absorbed in the exquisite sense of mere tranquil existence, that I neglect my talents. I should be incapable of drawing a single stroke at the present moment; and yet I feel that I never was a greater artist than now.</p>
									<p>When, while the lovely valley teems with vapour around me, and the meridian sun strikes the upper surface of the impenetrable foliage of my trees, and but a few stray gleams steal into the inner sanctuary, I throw myself down among the tall grass by the trickling stream;</p>
									<p>She packed her seven versalia, put her initial into the belt and made herself on the way.</p>
								</div>
								<ul>
									<li><a href="#">Read more</a></li>
									<li><a href="#">Share this</a></li>
									<li><a href="#">Become a member</a></li>
									<li><a href="#">Donate</a></li>
								</ul>
							</div>
						</div>
					</div>
					<div class="ca-item ca-item-8">
						<div class="ca-item-main">
							<div class="ca-icon"></div>
							<h3>It's time to move on</h3>
							<h4>
								<span class="ca-quote">&ldquo;</span>
								<span>A nation's culture resides in the hearts and in the soul of its people.</span>
							</h4>
								<a href="#" class="ca-more">more...</a>
						</div>
						<div class="ca-content-wrapper">
							<div class="ca-content">
								<h6>Let's finally become humans</h6>
								<a href="#" class="ca-close">close</a>
								<div class="ca-content-text">
									<p>I am so happy, my dear friend, so absorbed in the exquisite sense of mere tranquil existence, that I neglect my talents. I should be incapable of drawing a single stroke at the present moment; and yet I feel that I never was a greater artist than now.</p>
									<p>When, while the lovely valley teems with vapour around me, and the meridian sun strikes the upper surface of the impenetrable foliage of my trees, and but a few stray gleams steal into the inner sanctuary, I throw myself down among the tall grass by the trickling stream;</p>
									<p>She packed her seven versalia, put her initial into the belt and made herself on the way.</p>
								</div>
								<ul>
									<li><a href="#">Read more</a></li>
									<li><a href="#">Share this</a></li>
									<li><a href="#">Become a member</a></li>
									<li><a href="#">Donate</a></li>
								</ul>
							</div>
						</div>
					</div>
				</div>
			</div>
			<h5>Quotes by Mohandas Gandhi</h5>
		</div>
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
		<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
		<!-- the jScrollPane script -->
		<script type="text/javascript" src="js/jquery.mousewheel.js"></script>
		<script type="text/javascript" src="js/jquery.contentcarousel.js"></script>
		<script type="text/javascript">
			$('#ca-container').contentcarousel();
		</script>
    </body>
</html>