Flexslider가 페이지를로드하는 동안 두 번째 슬라이드를 표시합니다.

Question

Flexslider는 내 페이지 (예 : http://www.esthergibbons.com)를로드하는 동안 첫 번째 슬라이드를 표시하기 전에 두 번째 슬라이드 및 다른 슬라이드의 내용을 빠르게 깜박입니다.

다른 사람들이 Flexslider와 비슷한 문제가 있지만이 정확한 상황을 찾지 못했음을 알 수 있습니다.

지연로드 문제 일 수 있습니까? 저는 초보자이며 문제의 원인을 확인하기 위해 어디에서 확인해야할지 모릅니다. 또는 그것을 고치기 위해 무엇을 바꿀 것인가.

어떤 안내해 주셔서 감사합니다.

<!-- FlexSlider --> 
<section class="flexslider home"> 
    <ul class="slides"> 
     <li><img src="http://www.esthergibbons.com/images/weddings/002-bride-and-groom-in-baseball-pit.jpg" alt="Black and white wedding photo of bride and groom sitting on bench inside of rustic baseball pit, seen through hole in a chain-link fence" /></li> 
     <li><img src="http://www.esthergibbons.com/images/weddings/01-wedding-entrance-fountain-happy.jpg" alt="Emotional wedding photo of bride and groom entering ceremony hand in hand at Chateau Saint-Ambroise, Montreal" /></li>   
     <li><img src="http://www.esthergibbons.com/images/weddings/01-wedding-photo-mumford-lights-abbaye-oka.jpg" alt="Creative portrait of wedding couple dancing in doorway of rustic hallway lit with hanging lights, at Abbaye d'Oka, Quebec" /></li> 
     <li><img src="http://www.esthergibbons.com/images/weddings/01-bride-wiping-grooms-eyes-ceremony.jpg" alt="Photojournalistic wedding photo of bride reaching across to wipe groom's eyes during their wedding ceremony at Les Trois Tilleuls chapel in Monteregie, Quebec" /></li> 
     <li><img src="http://www.esthergibbons.com/images/weddings/01-groom-daughter-walking-hand-in-hand.jpg" alt="A calm photo of quiet moment as the groom walks away hand in hand with his young daughter" /></li> 
     <li><img src="http://www.esthergibbons.com/images/weddings/01-bride-groom-natural-wedding-photo-walking-away.jpg" alt="A natural photo of the bride and groom walking in a rustic wedding location" /></li> 
     </ul> 
</section> 
<!-- FlexSlider/End --> 

을 그리고 여기에 Flexslider JS 파일이 어디 :

는 여기에 내가 HTML에 Flexslider을 설정 어디 플러그인을 초기화하기 전에 http://www.esthergibbons.com/scripts/jquery.flexslider.js

Answer 1

슬라이드가 표시됩니다. 플러그인을 초기화하기 전에 이미지가 표시되지 않도록 CSS를 통해 슬라이드를 숨긴 다음 start() 콜백을 사용하여 flexslider를 초기화 한 후 모든 내용을 표시합니다.

$('.flexslider').flexslider({ 
 
    start: function(){ 
 
     $('.slides').show(); 
 
    }, 
 
    });

.slides { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.6.3/jquery.flexslider.js"></script> 
 

 
<section class="flexslider home"> 
 
    <ul class="slides"> 
 
     <li><img src="http://www.esthergibbons.com/images/weddings/002-bride-and-groom-in-baseball-pit.jpg" alt="Black and white wedding photo of bride and groom sitting on bench inside of rustic baseball pit, seen through hole in a chain-link fence" /></li> 
 
     <li><img src="http://www.esthergibbons.com/images/weddings/01-wedding-entrance-fountain-happy.jpg" alt="Emotional wedding photo of bride and groom entering ceremony hand in hand at Chateau Saint-Ambroise, Montreal" /></li>   
 
     <li><img src="http://www.esthergibbons.com/images/weddings/01-wedding-photo-mumford-lights-abbaye-oka.jpg" alt="Creative portrait of wedding couple dancing in doorway of rustic hallway lit with hanging lights, at Abbaye d'Oka, Quebec" /></li> 
 
     <li><img src="http://www.esthergibbons.com/images/weddings/01-bride-wiping-grooms-eyes-ceremony.jpg" alt="Photojournalistic wedding photo of bride reaching across to wipe groom's eyes during their wedding ceremony at Les Trois Tilleuls chapel in Monteregie, Quebec" /></li> 
 
     <li><img src="http://www.esthergibbons.com/images/weddings/01-groom-daughter-walking-hand-in-hand.jpg" alt="A calm photo of quiet moment as the groom walks away hand in hand with his young daughter" /></li> 
 
     <li><img src="http://www.esthergibbons.com/images/weddings/01-bride-groom-natural-wedding-photo-walking-away.jpg" alt="A natural photo of the bride and groom walking in a rustic wedding location" /></li> 
 
     </ul> 
 
</section>