slider with jquery - 2

<!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 type='text/javascript'>
        var x = 300;
        var slideArray = $("#slider li") ;
        var slideMax = slideArray.length - 1;
        var currSlideNo = 0;
        var nextSlideNo = currSlideNo + 1;
        $(slideArray[currSlideNo]).css("left", -x);
        $("#slider li").css("left",0);
        var changeSlide = function(){
            nextSlideNo = currSlideNo + 1;
            if (nextSlideNo > slideMax) nextSlideNo = 0;
            $(slideArray[currSlideNo]).css("left",0);
            $(slideArray[nextSlideNo]).css("left",-x);
            $(slideArray[currSlideNo]).animate({left: x});
            $(slideArray[nextSlideNo]).animate({left: 0});
            currSlideNo = currSlideNo + 1;
            if (currSlideNo > slideMax) currSlideNo = 0;
        }
        setInterval(changeSlide,2000);
    </script>
</body>
</html>