title: very simple slide show with previous and next control
body: <p>I am trying to create a very simple slide show with some very basic controls such as previous and back. The next seems to be working fine but the previous is showing some issues. When I am hitting the previous the container is becoming completely blank for a while before an item shows up.How do I handle this? Here is what i have</p>
  
  <pre><code>&lt;ul class="container"&gt;
      &lt;li class="item"&gt;One&lt;/li&gt;
      &lt;li class="item"&gt;Two&lt;/li&gt;
      &lt;li class="item"&gt;Three&lt;/li&gt;
  &lt;/ul&gt;
  
  &lt;div class="prev"&gt;Prev&lt;/div&gt;
  &lt;div class="next"&gt;Next&lt;/div&gt;
  </code></pre>
  
  <p>And here is the script</p>
  
  <pre><code>$('.item:gt(0)').hide();
  setInterval(function () {
      $('.item').eq(0).hide()
          .next('.item').show()
          .end().appendTo('.container');
  }, 3000);
  
  $('.next').click(function(){
      $('.item:visible').hide().next().show()
      .end().appendTo('.container');
  });
  
  $('.prev').click(function(){
      $('.item:visible').hide().prev().show()
      .end().appendTo('.container');
  });
  </code></pre>
  
  <p>Here is the fiddle</p>
  
  <p><a href="http://jsfiddle.net/sghoush1/arE2z/5/" rel="nofollow">http://jsfiddle.net/sghoush1/arE2z/5/</a></p>