slide image from right to left

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title></title>
<meta name="" content="">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<style type="text/css">
    #container{
    overflow:hidden;
    width:180px;
    height:100px;
    }
    #slide{
    width:550px;
    display:block;
    }
    #slide > img{
    display:inline;
    width:180px;
    height:100px;
    }
</style>
<script type="text/javascript">
    $(document).ready(function(){
        var slide = function(){ $('#slide').animate({
            marginLeft : parseInt($('#slide').css("margin-left"))-180 + "px"
            },2000,"swing",
            function(){
            $("#slide").css("margin-left","0px");
            $("#slide img:first").appendTo("#slide");
            });
        };
        setInterval(slide,7000);
    });
</script>
</head>
<body>
    <div id="container" style="margin-left:0">
        <div id="slide">
            <img src="http://s2.postimg.org/5uxqi0mgl/cats1.jpg" />
            <img src="http://s2.postimg.org/66f6us2wl/cats2.jpg" />
            <img src="http://s2.postimg.org/ai3sjs9th/cats3.jpg" />
        </div>
    </div>
</body>
</html>