jQuery slideshow - Images after the first one are not showing up
<p>I am trying to create an image slideshow. I have managed to develop the following code so far.  The problem is the following code displays the first image only. After the page loading is complete, the first image shows up perfectly from left and fades away after few seconds and then rest of the images just do not show up.</p>

<p>Could you please tell me how to show the rest of the images one after another?</p>

<pre><code>&lt;script src="http://code.jquery.com/jquery-1.9.1.min.js"&gt;&lt;/script&gt;
&lt;script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"&gt;
&lt;script&gt;
    $(document).ready(function(){   
        $(".slider img").each(function() { 
            $(this).show("slide",{direction:'right'},1000);
            $(this).delay(5500).hide("slide",{direction:'left'},1000);  
        });
    });
&lt;/script&gt;

&lt;div class="slider"&gt;
    &lt;img src="slideshow/1.jpg"  /&gt;
    &lt;img src="slideshow/2.jpg"  /&gt;
    &lt;img src="slideshow/4.jpg"  /&gt;
&lt;/div&gt;
</code></pre>

<p>CSS</p>

<pre><code>&lt;style&gt;
 .slider{
  width: 980px;
  height:362px;
  overflow:hidden;
  margin: 30px auto;
  background-image:url(slideshow/ajax-loader.gif);
  background-repeat:no-repeat;
  background-position:center;

 }
.slider img {
 display:none;
 }
&lt;/style&gt;
</code></pre>
