jquery slide animation 1(20150908)

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>슬라이드</title>
<script src="js/jquery-1.11.3.js"></script>
<style>
    #slider {
        position: relative;
        margin: 0 auto;
        width: 500px;
        height: 300px;
        overflow: hidden;
    }
    #slider img {
        position: absolute; /* relative */
        top: 0;
        left: -500px;
    }
</style>
</head>
<body>
    <div id="slider">
        <img src="images/food.jpg">
        <img src="images/sports.jpg">
        <img src="images/nature.jpg">
        <img src="images/fashion.jpg">
        <img src="images/transport.jpg">
    </div>
    <script>
        var sno = 0;
        var slide = $("#slider > img");
        var max = slide.length - 1;
        $(slide[sno]).css({"left":"0","top":"0"});
        $("#slider").click(function(){
            $(slide[sno]).animate({"left":"500px"},1000,function(){ $(this).css({"left":"-500px"}); } );
            sno++;
            if( sno > max ) sno = 0;
            $(slide[sno]).animate({"left":"0"},1000);
        });
    </script>
</body>
</html>