slider with jquery - pointer

<!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;
    }
    #snavi {
        width:300px;
        height:20px;
        line-height:20px;
        text-align:center;
    }
</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>
            <li><img src="http://lorempixel.com/300/200/fashion" /></li>
        </ul>
    </div>
    <div id="snavi"></div>
    <script type='text/javascript'>
        var x = 300;
        var slideArray = $("#slider li") ;
        var slideMax = slideArray.length - 1;
        var currSlideNo = 0;
        $("#slider li").css("left", -x);
        $(slideArray[currSlideNo]).css("left", 0);
        for( var i = 0; i <= slideMax; i++ ) {
            var addhtml = " <a href='" + i + "'>O</a> ";
            $("#snavi").append( addhtml );
        }
        $("#snavi a").css({color:"#000",textDecoration:"none"});
        var linkArray = $("#snavi a");
        $(linkArray[0]).css({color:"#f00"});

        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;
            $("#snavi a").css({color:"#000"});
            $(linkArray[currSlideNo]).css({color:"#f00"});
        }

        var timer = setInterval(changeSlide,2000);

        $("#snavi a").click(function(event){
            event.preventDefault();
            var no = $(this).attr("href");
            currSlideNo = parseInt(no);
            $("#slider li").css("left",-x);
            $(slideArray[currSlideNo]).css("left",0);
            clearInterval(timer);
            timer = setInterval(changeSlide,2000);
        });

    </script>
</body>
</html>