Horizontal Div Slider

I’m trying to make a div slider go left to right. In as much detail this is what I would like:

  • The div to be hidden on first page load
    Have the div slide left to right AND BACK by the click of an image NOT a button
    When the image (of a right arrow) is clicked, let the arrow slide out with the div (and IF possible when div is fully extended have image of a left arrow enabling a slide back and vice-versa)

Here’s what I got so far. (Don’t need to use) If you can help with any of the above that would be AWESOME!


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="TestSite/js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
	 $('#slideleft button').click(function() {
    var $lefty = $(this).next();
    $lefty.animate({
      left: parseInt($lefty.css('left'),10) == 0 ?
      -$lefty.outerWidth() :
      0
    });
  });
});
</script>

<style>

    .slide {
  position: relative;
  overflow: hidden;
  height: 120px;
  width: 350px;
  margin: 1em 0;
  background-color: #ffc;
  border: 1px solid #999;
}
.slide .inner {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 338px;
  height: 36px;
  padding: 6px;
  background-color: #4c5;
  color: #333;
}
.slide button {
  margin: .7em 0 0 .7em;
}
.js #slidebottom .inner { 
  display: none;
}
</style>

</head>

    <div id="slideleft" class="slide">
      <button>slide it</button>
      <div class="inner">Slide from bottom</div>
    </div>



<body>
</body>
</html>

Well
I’m not expert! but I found this DIV Horizontal work perfectly…

<html xmlns=“http://www.w3.org/1999/xhtml” xml:lang=“en” >
<head>
<title>Untitled 1</title>

</head>
<style type=“text/css”>

#slide p {
width: 3000px;
height: 200px;
border: none;
text-align:center;
}

#slide {
width: 990px;
height: 200px;
border: none;
overflow-x: scroll;
overflow-y: hidden;
background-color: lightgreen;
}
</style>

<body>
<center>

<div id=“slide”>
<p>your paragraph…</p>
</div>

</center>
</body>

</html>