title: how do i slide images left to right or right to left using jquery?
body: <p>I'm trying to build a simple image slider for my webpage, and here's the code that I have come up with using jquery, css - </p>
  
  <pre><code>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;title&gt;&lt;/title&gt;
  &lt;meta name="" content=""&gt;
  &lt;script type="text/javascript" src="jquery.js"&gt;&lt;/script&gt;
  &lt;style type="text/css"&gt;
      *{
      margin:0; padding:0;
      }
      #container{
      position:absolute; left:100px; top:100px;
      width:102px;height:102px; 
      border:1px solid red;   
      overflow:hidden; display:inline;
      }
      #container img{float:left;}
  &lt;/style&gt;
  &lt;script type="text/javascript"&gt;
      $(document).ready(function(){
          setInterval(slideImages, 5000);
          function slideImages(){
          $('#container img:first-child').clone().appendTo('#container');
          $('#container img:first-child').remove();
          }
      });
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
      &lt;div id="container"&gt;
      &lt;img src="1.jpg" /&gt;
      &lt;img src="2.jpg" /&gt;
      &lt;img src="3.jpg" /&gt;
      &lt;img src="4.jpg" /&gt;
      &lt;img src="5.jpg" /&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>While the code works and displays the images, I would like to add some more effects to it by having the new image slide into the 'container' pane. Like sliding from right direction to the left, and then staying there for sometime and then the next image replaces the existin one by again sliding from right to left.</p>
  
  <p>Please guide me as to how to get the sliding r-to-l effect. I know i can slide up/down using jquery.. but how to do it l-r or r-l?</p>
  
  <p>Thanks!</p>