title: Jquery image slider not working properly onLoad
body: <p>I have use Jquery to slide images. However Images slide but there are some problem. I have 4 images. When page loads it shows 4th image first &amp; when image slides 4th image stays onScreen and sliding images just flashes up there. Once all 4 images slided then from second round they all work fine. Here is the link <a href="http://foxboxretail.com/" rel="nofollow">click</a>. Please view this link to know exact problem..</p>
  
  <p>html</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div class="main-banner"&gt;
    &lt;div id="slideshow"&gt;
      &lt;div class="slideImg"&gt;
        &lt;img src="images/Gift-a-spa.jpg" /&gt;
      &lt;/div&gt;
  
      &lt;div class="slideImg"&gt;
        &lt;img src="images/Gift-A-Shopping.jpg" /&gt;
      &lt;/div&gt;
  
      &lt;div class="slideImg"&gt;
        &lt;img src="images/Gift-a-Skill-Learn.jpg" /&gt;
      &lt;/div&gt;
  
      &lt;div class="slideImg"&gt;
        &lt;img src="images/Indoor-Sports.jpg" /&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;&lt;!--main-banner-ends--&gt;
  </code></pre>
  
  <p>jquery</p>
  
  <pre class="lang-js prettyprint-override"><code>$("#slideshow &gt; .slideImg:gt(0)").hide();
  
  setInterval(function () {
    $('#slideshow &gt; .slideImg:first')
    .fadeOut(1000)
    .next()
    .fadeIn(1000)
    .end()
    .appendTo('#slideshow');
  }, 3000);
  </code></pre>
  
  <p>css</p>
  
  <pre class="lang-css prettyprint-override"><code>.main-banner {
    background: #444;
    background-size: cover;
    width: 100%;
    height:400px;
    position: relative;
  }
  
  #slideshow { 
    margin: 0 auto; 
    position: relative; 
    width:100%;
    height:auto;
  }
  
  #slideshow &gt; .slideImg { 
    position: absolute; 
  }
  
  #slideshow img{
    width:100%;
    min-height:300px;
    height:400px
  }
  </code></pre>