slider basic code

<!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>
</body>
</html>