Here’s a quickie: a nice and small jQuery carousel…
Take some list items:
And apply some CSS:
ul,
li
{
margin: 0;
padding: 0;
}
#carousel
{
display: block;
position: relative;
width: 400px;
height: 250px;
overflow: hidden;
}
#carousel ul
{
display: block;
width: 5000px;
height: 250px;
}
#carousel li
{
display: block;
float: left;
width: 400px;
height: 250px;
background: #0080FF;
color: #FFFFFF;
font-size: 12pt;
}
li
{
margin: 0;
padding: 0;
}
#carousel
{
display: block;
position: relative;
width: 400px;
height: 250px;
overflow: hidden;
}
#carousel ul
{
display: block;
width: 5000px;
height: 250px;
}
#carousel li
{
display: block;
float: left;
width: 400px;
height: 250px;
background: #0080FF;
color: #FFFFFF;
font-size: 12pt;
}
And finally sprinkle with some JS:
$( document ).ready( function()
{
var t = $( '#carousel' );
var m = $( 'li', t ).length;
var w = $( 'li:first', t ).outerWidth();
var i = 0;
setInterval( function()
{
if ( i >= m )
{
i = 0;
}
$( 'ul', t ).animate({
'margin-left' : i * w * -1 + 'px'
}, 1000, 'easeInOutQuint' );
i++;
}, 3000 );
});
{
var t = $( '#carousel' );
var m = $( 'li', t ).length;
var w = $( 'li:first', t ).outerWidth();
var i = 0;
setInterval( function()
{
if ( i >= m )
{
i = 0;
}
$( 'ul', t ).animate({
'margin-left' : i * w * -1 + 'px'
}, 1000, 'easeInOutQuint' );
i++;
}, 3000 );
});
And voila:
