Help needed to arrange images in a slideshow format! The images are currently scattered on the webpage and causing confusion. Thank you in advance for any assistance provided. Below are the HTML, JavaScript, and CSS codes that need to be fixed:
HTML
<!DOCTYPE html>
<html>
<head>
<title>Panda</title>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" href="jquery.mobile-1.4.0.min.css"/>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" />
<link rel="stylesheet" href="gallerytest.css"/>
<link rel="stylesheet" href="gallerytest.css"/>
<script src="jquery-2.0.3.min.js"></script>
<script src="jquery.mobile-1.4.0.min.js"></script>
<script src="jquery-ui-1.10.4"></script>
<script src="slide.js"></script>
</head>
<body onload="Slider();">
<div data-role="page" id="Home" data-theme="a">
<div data-role="header" >
<div data-role="navbar">
<ul id="header">
<li><a href="home.html"><img src="images/home-black.png"/>  Home</a></li>
<li><a href="donate.html">Donate</a></li>
<li><a href="about.html"><img src="images/info-black.png"/>  About</a></li>
</ul>
</div>
</div>
<div role="main" class="ui-content">
<h1 style="text-align:center">Gallery</h1>
</div>
</div>
<div data-role="content" >
<div class="slider">
<img id="1" src="images/full/001.jpg" border ="0" alt="Image001" />
<img id="2" src="images/full/002.jpg" border ="0" alt="Image002" />
<img id="3" src="images/full/003.jpg" border ="0" alt="Image003" />
<img id="4" src="images/full/004.jpg" border ="0" alt="Image004" />
<img id="5" src="images/full/005.jpg" border ="0" alt="Image005" />
<img id="6" src="images/full/006.jpg" border ="0" alt="Image006" />
<img id="7" src="images/full/007.jpg" border ="0" alt="Image007" />
<img id="8" src="images/full/008.jpg" border ="0" alt="Image008" />
<img id="9" src="images/full/009.jpg" border ="0" alt="Image009" />
</div>
</div>
<div data-role="footer">
<div data-role="navbar">
<ul id="footer">
<li><a href="card.html">Send me a Card!</a></li>
<li><a href="donate.html">Donate</a></li>
<li><a href="contact.html">Contact me</a></li>
</ul>
</div>
</div>
</body>
</html>
CSS
.slider{
width:600px;
height:600px;
overflow:hidden;
margin:0;
background-image:url('images/ajax-loader.gif');
background-repeat:no-repeat;
background-position:center;
background:red;
}
JS
$(document).on("pageinit", function() {
$(".slider #1").show("fade", 500);
$(".slider #1").delay(5500).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(5500).hide("slide"{direction:"left"},500);
if (count==sc) {
count=1
} else {
count=count+1
}
}, 6500);
});