Загрузка изображений и слайдер

Все мои изображения загружаются рядом друг с другом, а не отдельными изображениями.
Как исправить?

У меня есть коробка 500 х 300 пикселей

Скриншот, чтобы вы могли видеть, что я имею в виду

<?php
if(isset($_FILES['ImageUpload'])){
// if the form has been submitted
$imageName = $_FILES['ImageUpload']['name'];
$imageTemp = $_FILES['ImageUpload']['tmp_name'];
$imageType = $_FILES['ImageUpload']['type'];
// filter image name
$imageName = preg_replace("#[^a-z0-9.]#i","",$imageName);

// error handling
if(!$imageName){
echo("Please select a file to upload");
}else{
move_uploaded_file($imageTemp, "uploads/$imageName");
}
}

?>

<style type="text/css">
#slider{
width:500px;
height:300px;
overflow:hidden;
margin:30px auto;
border:2px solid grey;
/*  background-image:url(images/Progress.gif); */
background-repeat:no-repeat;
background-position:center;
}

</style>

<script type="text/javascript" src="includes/js/jquery.js"></script>

<script type="text/javascript">
sliderInt = 1;
sliderNext = 2;

$(document).ready(function() {
$("#slider > img#1").fadeIn(300);
startSlider();
});

function startSlider(){
count = $("#slider > img").size();
loop = setInterval(function(){

if(sliderNext > count){
sliderNext = 1;
sliderInt =1;
}

$("#slider > img").fadeOut(300);
$("#slider > img#" + sliderNext).fadeIn(300);

sliderInt = sliderNext;
sliderNext = sliderNext +1;

}, 3000)
}</script><form action="slider_custom.php" id="uploadsForm" method="POST" enctype="multipart/form-data">

<input type="file" name="ImageUpload"/> Select a file to upload... <br/><br/>

<input type="submit" value="Upload"/>

</form><div id="slider"><?php
$imageDisplay = "";
$images = scandir("uploads");
$ignore = array(".","..");
$i = '1';
foreach($images as $file){
if(!in_array($file, $ignore)){
$imageDisplay .= '<img id="1" src="uploads/'.$file.'" border="0"/>';
$i++;
}
}

echo($imageDisplay);
?>
</div><!-- end .slider -->