slider basic

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>slide</title>
    <style>
        #slider {
            width: 800px;
            height: 400px;
            margin: 0 auto;
            position: relative;
            background-color: pink;
            overflow: hidden;
        }
        #slider > img {
            position: absolute;
            top: 0;
            left: -800px;
        }
        #slider > img:first-child {
            left: 0;
        }
    </style>
</head>
<body>
    <div id="slider">
        <img src="food.jpg" width="800" height="400" alt="food">
        <img src="cats.jpg" width="800" height="400" alt="cats">
        <img src="city.jpg" width="800" height="400" alt="city">
        <img src="fashion.jpg" width="800" height="400" alt="fashion">
        <img src="sports.jpg" width="800" height="400" alt="sports">
    </div>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script>
        var imgs = $("#slider > img");
        var last = imgs.length - 1;
        var sno = 0;
        $("#slider").on("click",function(){
            if( $(imgs[sno]).is(":animated") ) return;
            $(imgs[sno]).animate({"left":"800px"},1000,function(){
                    $(this).css({"left":"-800px"});
            });
            sno++; //sno = sno + 1;
            if( sno > last ) sno = 0;
            $(imgs[sno]).animate({"left":"0"},1000);
        });
        var timer = setInterval(function(){
            $("#slider").click();
        },2000);
    </script>
</body>
</html>