JQuery слайдер изображения не работает должным образом onLoad

Question

У меня есть JQuery для слайд-изображений. Однако изображения скользят, но есть некоторые проблемы. У меня 4 изображения. Когда страница загружается, сначала отображается четное изображение &, когда изображение слайдов. 4-е изображение остается на экране. Скользящие изображения просто вспыхивают там. Как только все 4 изображения сместились, а затем со второго раунда, все они работают нормально. Вот ссылка click. Пожалуйста, просмотрите эту ссылку, чтобы узнать точную проблему ..

HTML

<div class="main-banner"> 
    <div id="slideshow"> 
    <div class="slideImg"> 
     <img src="images/Gift-a-spa.jpg" /> 
    </div> 

    <div class="slideImg"> 
     <img src="images/Gift-A-Shopping.jpg" /> 
    </div> 

    <div class="slideImg"> 
     <img src="images/Gift-a-Skill-Learn.jpg" /> 
    </div> 

    <div class="slideImg"> 
     <img src="images/Indoor-Sports.jpg" /> 
    </div> 
    </div> 
</div><!--main-banner-ends--> 

JQuery

$("#slideshow > .slideImg:gt(0)").hide(); 

setInterval(function() { 
    $('#slideshow > .slideImg:first') 
    .fadeOut(1000) 
    .next() 
    .fadeIn(1000) 
    .end() 
    .appendTo('#slideshow'); 
}, 3000); 

CSS

.main-banner { 
    background: #444; 
    background-size: cover; 
    width: 100%; 
    height:400px; 
    position: relative; 
} 

#slideshow { 
    margin: 0 auto; 
    position: relative; 
    width:100%; 
    height:auto; 
} 

#slideshow > .slideImg { 
    position: absolute; 
} 

#slideshow img{ 
    width:100%; 
    min-height:300px; 
    height:400px 
} 

Answer 1

Проблем нет. Первое изображение отображается первым, когда я проверил. см FIDDLE

$("#slideshow > .slideImg:gt(0)").hide(); 
 

 
setInterval(function() { 
 
    $('#slideshow > .slideImg:first') 
 
    .fadeOut(1000) 
 
    .next() 
 
    .fadeIn(1000) 
 
    .end() 
 
    .appendTo('#slideshow'); 
 
}, 3000);

.main-banner { 
 
    background: #444; 
 
    background-size: cover; 
 
    width: 100%; 
 
    height:400px; 
 
    position: relative; 
 
} 
 

 
#slideshow { 
 
    margin: 0 auto; 
 
    position: relative; 
 
    width:100%; 
 
    height:auto; 
 
} 
 

 
#slideshow > .slideImg { 
 
    position: absolute; 
 
    width: 100%; 
 
} 
 

 
#slideshow img{ 
 
    width:100%; 
 
    min-height:300px; 
 
    height:400px 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<div class="main-banner"> 
 
    <div id="slideshow"> 
 
    <div class="slideImg"> 
 
     <img src="http://cdn3.aukera.es/blog/imagenes/google-tag-manager-for-dummies.png" /> 
 
    </div> 
 

 
    <div class="slideImg"> 
 
     <img src="http://www.europeanprospects.org/sites/default/files/styles/editorial/public/image_188537642667430843.jpg?itok=zE3T4v9G" /> 
 
    </div> 
 

 
    <div class="slideImg"> 
 
     <img src="http://www.spodestorage.co.za/wp-content/uploads/2014/04/dummy.png" /> 
 
    </div> 
 

 
    <div class="slideImg"> 
 
     <img src="http://purvknowledge.com/userfiles/galleries/o_8-390.jpg" /> 
 
    </div> 
 
    </div> 
 
</div><!--main-banner-ends-->