slider with jQuery animate - 1

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Javascript Slide Example</title>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<style type='text/css'>
    body {
        margin:0;
    }
    #slidebox {
        position:relative;
        width:300px;
        height:200px;
        overflow:hidden;
        white-space:nowrap;
        border:1px solid #000;
    }
    #slidebox ul#slider {
        list-style:none;
        margin:0;
        padding:0;
    }
    #slidebox ul li {
        position:absolute;
        width:300px;
        height:300px;
    }
    #slidebox ul li img {
        width:300px;
        height:200px;
    }
</style>
<body>
    <div id="slidebox">
        <ul id="slider">
            <li><img src="http://lorempixel.com/300/200/sports" /></li>
            <li><img src="http://lorempixel.com/300/200/animals" /></li>
            <li><img src="http://lorempixel.com/300/200/food" /></li>
            <li><img src="http://lorempixel.com/300/200/business" /></li>
            <li><img src="http://lorempixel.com/300/200/city" /></li>
        </ul>
    </div>
    <script>
        var slideArray = $("#slidebox ul li");
        $("#slidebox ul li").css("left", -300);
        $(slideArray[0]).css("left",0);
        var slideMax = slideArray.length - 1;
        var currSlideNo = 0;
        var nextSlideNo;
        $(function(){
          $("#slidebox").click(function(){
           nextSlideNo = currSlideNo + 1;
           if ( nextSlideNo > slideMax ) nextSlideNo = 0;
           $(slideArray[nextSlideNo]).css("left",-300);
           $(slideArray[currSlideNo]).animate({left:300});
           $(slideArray[nextSlideNo]).animate({left:0});
           currSlideNo = nextSlideNo;
          });
        });
        var timer = setInterval(function(){
            $("#slidebox").trigger( "click" );
        },2000);
    </script>


</body>
</html>