slider test 1

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>slider</title>
    <script src="http://code.jquery.com/jquery-1.11.1.js"></script>
</head>
<style>
    #slider { width:500px;height:300px;position:relative;overflow:hidden; }
    #slider ul { list-style:none;padding:0;margin:0; }
    #slider ul li { width:500px;height:300px;position:absolute;top:0;left:0;overflow:hidden; }
</style>
<body>
    <div id="slider">
        <ul>
            <li><img src="http://lorempixel.com/500/300/nature"></li>
            <li><img src="http://lorempixel.com/500/300/food"></li>
            <li><img src="http://lorempixel.com/500/300/city"></li>
            <li><img src="http://lorempixel.com/500/300/animals"></li>
            <li><img src="http://lorempixel.com/500/300/sports"></li>
        </ul>
    </div>
    <button id="prev">이전</button>
    <button id="next">다음</button>
    <script>
        $(function(){
            var slides = $("#slider ul li");
            var scount = slides.length;
            var maxArr = scount - 1;
            $("#slider ul li").css("left","-500px");
            var cslide = 0;
            var nslide = cslide + 1;
            if(nslide > maxArr) nslide = 0;
            $(slides[cslide]).css("left","0");

            $("#next").click(function(){
                $(slides[cslide]).animate({left: "500px"});
                $(slides[nslide]).css("left","-500px");
                $(slides[nslide]).animate({left: "0"});
                cslide++;
                if(cslide>maxArr) cslide=0;
                nslide = cslide + 1;
                if(nslide>maxArr) nslide=0;
            });

        });
    </script>
</body>
</html>