반응형

http://code.google.com/p/jquery-infinite-carousel/

download : http://code.google.com/p/jquery-infinite-carousel/downloads/list

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

Features

  • Really easy way to insert a quality HTML carousel on your site
  • Loop infinitely over items when clicking next or previous button
  • Avoid animation flickering due to multi-clicks on next and previous buttons

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(event){
if(event.originalEvent){
window
.clearInterval(intervalId);
}
}
);






반응형

+ Recent posts