carousel

testing a carousel

by oterox

HTML

<div id="container">  
    <div id="carousel">  
        <ul>  
            <li><img src="http://placekitten.com/720/230" /></li>  
            <li><img src="http://placedog.com/720/230" /></li>  
            <li><img src="http://placekitten.com/720/230" /></li>  
            <li><img src="http://placedog.com/720/230" /></li>  
            <li><img src="http://placekitten.com/720/230" /></li>  
        </ul>  
    </div>  
    <a id="navPrev" href="#">Prev</a>  
    <a id="navNext" href="#">Next</a>  
</div>

CSS

#container {
    height:100px; width:180px; font-family:Tahoma;}
#carousel { 
    height:100px; width:180px; border:1px solid #000;overflow:hidden;}
#carousel ul { list-style-type:none;margin-top:4px; width:1000px; margin-left:0; left:0; padding-left:1px;}
#carousel li { display:inline;}
#carousel ul li img{ width:90px; height:90px; border:1px solid #ccc;float:left; }
#navPrev {float:left;}
#navNext {float:right;}

JavaScript

$(document).ready(function() {
    //Define the animation speed for the Carousel 
    var speed = 600;
    $('#navPrev').click(function() {
        //As the rest of our carousel is hidden, lets move it's margin left untilit's in view
        //We use the jQuery animate() function give this movement a nice smooth feel
        $('#carousel ul').animate({
            marginLeft: '-184px'
        }, speed);
    });
    $('#navNext').click(function() {
        //And now lets move back to the start of the Carousel
        $('#carousel ul').animate({
            marginLeft: '1px'
        }, speed);
    });
});