My favorites | Sign in
Project Logo
                
People details
Project owners:
  stephane.roucheray

Add an infinite carousel on your site, the easy way. See a Demo here

Features

Some HTML

<div id="viewport">
<ul>
	<li>1</li>
	<li>2</li>
	<li>3</li>
	<li>4</li>
	<li>5</li>
</ul>
</div>
<a id="previous">Previous</a>
<a id="next">Next</a>

<!-- 
ul/li structure can be replaced by any other html structure as div/div, div/span... 
-->

Some CSS

/* Comments on styles purpose in the source code */
#viewport{
	width: 240px;
	overflow:hidden;
}
#viewport ul{
	position: relative;
	padding: 0;
}
#viewport li{
	width: 100px;
	height: 50px;
	float: left;
	list-style: none;
}

Some JavaScript : the magic

$('#viewport').carousel('#previous', '#next');

Tips

If you need to activate auto-scrolling on your carousel, simply simulate a click :

//The auto-scrolling function
function slide(){
  $('#simpleNext').click();
}
//Launch the scroll every 2 seconds
var intervalId = window.setInterval(slide, 2000);

//On user click deactivate auto-scrolling
$('#previous, #simpleNext').click(
 function(){
  window.clearInterval(intervalId);
 }
);








Hosted by Google Code