Горизонтальный слайдер

by satantx

HTML

<div id="slider_savant">
    <ul>
        <li><img src="http://s3.amazonaws.com/creattica/uploaded-images/0022/5406/gaikopin.jpg" width="320" height="260" alt="savant"></li>
        <li><img src="http://s3.amazonaws.com/creattica/uploaded-images/0022/5406/gaikopin.jpg" width="320" height="260" alt="savant"></li>
        <li><img src="http://s3.amazonaws.com/creattica/uploaded-images/0022/5406/gaikopin.jpg" width="320" height="260" alt="savant"></li>
        <li><img src="http://s3.amazonaws.com/creattica/uploaded-images/0022/5406/gaikopin.jpg" width="320" height="260" alt="savant"></li>
        <li><img src="http://s3.amazonaws.com/creattica/uploaded-images/0022/5406/gaikopin.jpg" width="320" height="260" alt="savant"></li>
        <li><img src="http://s3.amazonaws.com/creattica/uploaded-images/0022/5406/gaikopin.jpg" width="320" height="260" alt="savant"></li>
        <li><img src="http://s3.amazonaws.com/creattica/uploaded-images/0022/5406/gaikopin.jpg" width="320" height="260" alt="savant"></li>
    </ul>
</div>

CSS

#slider_savant {
            overflow-x: scroll;
            overflow-y: hidden;
            height: 260px;
            margin: 0px;
            padding: 0px;
            width: 600px;
            float: left;
            display: block;
        }

        #slider_savant ul li {
            display: inline;
            list-style-type: none;
        }

        #slider_savant ul {
            margin: 0px;
            padding: 0px;
            width: 2300px;
            position: relative;
        }