Simple jQuery Slider

by demods

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Simple jQuery Slider</title>
    <link rel="stylesheet" href="css/slider.css">
</head>
<body>

    <div id="slider">
        <div class="container">
            <ul>
                <li><img src="http://dummyimage.com/640x480/000/fff&text=IMAGE1" width="640" height="480" alt=""></li>
                <li><img src="http://dummyimage.com/640x480/ff0/000&text=IMAGE2" width="640" height="480" alt=""></li>
                <li><img src="http://dummyimage.com/640x480/f00/fff&text=IMAGE3" width="640" height="480" alt=""></li>
            </ul>
        </div>
    </div>
    
    <script type="text/javascript" src="js/jquery-1.5.min.js"></script>
    <script type="text/javascript" src="js/slider.js"></script>
</body>
</html>

CSS

#slider {height:480px;margin:0 auto;position:relative;width:640px}
#slider .container {height:100%;overflow:hidden;width:100%}
#slider .container ul {list-style:none;margin:0;overflow:hidden;padding:0}
#slider .container ul li {float:left;height:480px;margin:0;padding:0}
#slider a {font-size:40px;font-weight:bold;position:absolute;text-decoration:none;top:200px}
#slider a.prev {left:-30px}
#slider a.next {left:650px}

JavaScript

$(function() {
    var slider = $("#slider"),
        totalSlides = slider.find("ul li").size(),
        sliderWidth = slider.width(),
        sliderHeight = slider.height(),
        animationSpeed = 500,
        currentSlide = slider.find("li.current").length ? slider.find("li.current") : slider.find("li:first-child"),
        marginLeft = 0;

    currentSlide.addClass("current");

    slider.find("ul").width(sliderWidth * totalSlides);
    slider.find(".container").before('<a href="#" class="prev">«</a>');
    slider.find(".container").after('<a href="#" class="next">»</a>');

    slider.find("a.next").click(function() {
        slider.find("li:last-child").is(".current") ? marginLeft = 0 : marginLeft = "-=" + sliderWidth;

        currentSlide = currentSlide.next().length ? currentSlide.removeClass("current").next().addClass("current") : currentSlide.removeClass("current").parent().find("li:first-child").addClass("current");

        slider.find("ul").animate({
            marginLeft: marginLeft
        }, animationSpeed);

        return false;
    });

    slider.find("a.prev").click(function() {
        slider.find("li:first-child").is(".current") ? marginLeft = 0 : marginLeft = "+=" + sliderWidth;

        currentSlide = currentSlide.prev().length ? currentSlide.removeClass("current").prev().addClass("current") : slider.find("li:first-child").addClass("current");

        slider.find("ul").animate({
            marginLeft: marginLeft
        }, animationSpeed);
        return false;
    });
});