whats wrong with this?

whats wrong with this?

<!doctype html>
<html>
<head>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" />
<style>

.wrapper {
}

.slider { 
width:  728px;
height: 310px;
overflow: hidden;
margin: 30px auto;
}


.slider img {
width:  728px;
height: 310px;
display: none;
}

</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<script>
function Slider() {
$(".slider #1").show("fade",500);
$(".slider #1").delay(3000).hide("slide", {direction:'left'},500);

var sc = $(".slider img").size();
var count = 2;

setInterval(function(){
$(".slider #" + count).show("slide", {direction:'right'},500);
$(".slider #" + count).delay(3000).hide("slide", {direction:'left'},500);

if(count==sc) {
count=1;
} else {
count=count+1;
}
}, 4000);
}
</script>
     
</head>

<body onload="Slider();">
<div class=wrapper>
<div class="slider">
<img id="1" src="assets/images/img1.jpg" />
<img id="2" src="assets/images/img2.jpg" />
<img id="3" src="assets/images/img3.jpg" />
</div>

</div>

</body>
</html>