Jquery 이미지 슬라이더가 제대로 작동하지 않습니다.

Question

이미지를 슬라이드하는 데 Jquery를 사용하고 있습니다. 그러나 이미지 슬라이드 있지만 몇 가지 문제가 있습니다. 4 개의 이미지가 있습니다. 페이지가로드되면 4 번째 이미지가 첫 번째로 표시됩니다. & 이미지가 4 번째 이미지를 계속 슬라이드하고 이미지가 화면 위로 깜박이면 이미지가 깜박입니다. 일단 모든 4 개의 이미지가 2 라운드에서 슬라이딩되면 그들은 모두 잘 동작합니다. 여기에 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-->