Hulp met slider

<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
        </script>
        <script>




$(window).load(function() {
    
    var theImage = $(ul li img);
    var theWidth = theImage.width();     
    //wrap into mother div
    $(ul).wrap(<div id="mother" />);                    
    //assign height width and overflow hidden to mother
    $(#mother).css({
        width: function() {
        return theWidth;
        
      }, 
        height: function() {
        return theImage.height();
      }, 
        position: relative,
        overflow: hidden      
    });
        //get total of image sizes and set as width for ul 
    var totalWidth = theImage.length * theWidth;
    $(ul).css({
        width: function(){
        return totalWidth;    
    }                
    });        
    $(theImage).each(        
        function(intIndex){                
                $(this).nextAll(a)
                .bind("click", function(){
                    if($(this).is(".next"))    {
                        
                        $(this).parent(li).parent(ul).animate({
                            "margin-left": (-(intIndex + 1) * theWidth)                
                        }, 1000)                    
                                    
                    } else if($(this).is(".previous")){
                    
                        $(this).parent(li).parent(ul).animate({
                            "margin-left": (-(intIndex - 1) * theWidth)                
                        }, 1000)    
                    
                    
                    } else if($(this).is(".startover")){
                        
                        $(this).parent(li).parent(ul).animate({
                            "margin-left": (0)                
                        }, 1000)
                    
                    }
                });//close .bind()                                     
    });//close .each()                         
});//doc ready


</script>
    <script>
    $(document).ready(function()
            {
                 $("#naam1").fadeIn(3000);
                 $("#naam2").fadeIn(3000);
            });
    </script>
<style>
body{
    margin:0;
    font-family:Arial Black;
    background:#CCC;
}
#content{
    margin-top:200px;
    margin-left:auto;
    margin-right:auto;
    background:#FFAA00;
    border:1px solid #AAAAAA;
    border-bottom:2px solid #444;
    width:720px;
    height:350px;
    border-radius:10px;
    position:relative;
    overflow:hidden;
    padding:0;
}
#naam1{
    float:left;
    background:#333;
    font-weight:bold;
    width:160px;
    padding-left:1px;
    padding-right:1px;
    height:auto;
    font-size:35px;
    color:#FFAA00;
    text-transform:uppercase;
    border-top-left-radius:10px;
    display:none;
}
#naam2{
    font-weight:bold;
    width:160px;
    float:left;
    padding-left:1px;
    padding-right:1px;
    height:auto;
    font-size:35px;
    color:#333;
    text-transform:uppercase;
    display:none;
}
ul li{
    float:left;
    list-style:none;
    position:relative;
}
ul li a{
    text-indent:-9999px;
    outline:none;
}ul li a.next{
    position:absolute;
    left:100px;
}ul li a.previous{
    position:absolute;
    left:0px;
}
ul li a.startover{
    position:absolute;
    
    left:200px;
}

ul li a.next{
    background:url(http://icons.iconarchive.com/icons/icojam/onebit/48/arrow-right-icon.png);
    width:48px;
    height:48px;
    position:absolute;
    bottom:0;
    float:right;
}
ul li a.previous{
    background:url(http://icons.iconarchive.com/icons/icojam/onebit/48/arrow-left-icon.png);
    width:48px;
    height:48px;
    position:absolute;
    bottom:0;
}
ul li a.startover{
    background:url(http://icons.iconarchive.com/icons/pixelmixer/basic-2/64/reload-icon.png);
    width:64px;
    height:64px;
    position:absolute;
    top:280px;
    left:420px;
}
ul li a.previous:hover{
    opacity:0.6;
}
ul li a.next:hover{
    opacity:0.6;
}
</style>
</head>
<body>

<div id="content">
    <div id="naam1">Sanday</div>
    <div id="naam2">Games</div>
    
    <ul>
        <li><img id="test" src="http://i.imgur.com/qyEZ3fh.png"/>                    <a class="next" href="#">next</a>                    </li>
        <li><img src="http://i.imgur.com/9z33ksm.png"/>    <a class="next" href="#">next</a>    <a class="previous" href="#">prev</a></li>
        <li><img src="http://i.imgur.com/T5xnubX.png"/>                                    <a class="next" href="#">next</a>    <a class="previous" href="#">prev</a></li>
        <li><img src="http://img9.imageshack.us/img9/9379/lgte6e5.png"/>    <a class="next" href="#">next</a>    <a class="previous" href="#">prev</a></li>
        <li><img src="http://i.imgur.com/GXSKnlN.png"/>                                                    <a class="previous" href="#">prev</a>        <a class="startover" href="#">startover</a></li>
</ul>


</div>
</body>
</html>