플렉스 슬라이더가 CSS보다 먼저로드 될 것으로 보입니다.

Question

저는 FlexSlider를 아주 간단한 방식으로 사용하고 있습니다. 그러나 마지막 슬라이드에 도달하여 첫 번째 슬라이드로 다시 돌아 오면 내용이 CSS에 미리로드 된 것처럼 슬라이더가 "스냅"됩니다. 슬라이더가 세 번째 슬라이드에서 루프 회귀 후에는 먼저, 텍스트를 (당신이 모든 방법을 통해 가야 볼 필요) 것을 알 수 있습니다
http://aj2.w-interactive.com/mds-slider-test2.html

: 여기

는 벗었 예제 슬라이드 ("We Deliver Your Trust"등 ...)는 처음에는 스타일없이로드 한 다음 스타일이 마침내로드 된 것처럼 점프합니다. 그러나 처음으로 루프가 끝나기 전에로드됩니다.

다음은 페이지 하단에서 스크립트입니다 :

<!-- FlexSlider --> 
 
    <script defer src="assets/js/jquery.flexslider.js"></script> 
 

 
<script type="text/javascript"> 
 
    $(function(){ 
 
     SyntaxHighlighter.all(); 
 
    }); 
 
    $(window).load(function(){ 
 
     $('.flexslider').flexslider({ 
 
     animation: "slide", 
 
\t \t slideshowSpeed: "4500", 
 
\t \t pausePlay: "true", 
 
     start: function(slider){ 
 
      $('body').removeClass('loading'); 
 
     } 
 
     }); 
 
    }); 
 
    </script>

모든 아이디어를 주시면 감사하겠습니다. 감사!

Answer 1

동일한 요소가 여러 개 있기 때문에 CSS가 올바르게 적용되지 않습니다. ID.

참조 : ". id 속성은 HTML 요소 (값이 HTML 문서 내에서 유일해야 함)에 대한 고유 ID를 지정"http://www.w3schools.com/tags/att_global_id.asp

는

당신은 샘플 HTML

<li> 
    <div id="slides" class="bkgd1"> 
     <h1 class="fade">We Deliver Your Trust</h1> 
     <h1 class="fade">Intermodal Drayage</h1> 
     <h2 class="fade">Centrally Located Terminals</h2> 
     <h2 class="fade">9 Locations Covering North America</h2> 
    </div> 
</li> 
<li> 
    <div id="slides" class="bkgd2"> 
     <h1 class="fade">Rail &amp; Steamship Interchange</h1> 
     <h2 class="fade">Fully Customs Bonded</h2> 
    </div> 
</li> 
<li> 
    <div id="slides" class="bkgd3"> 
     <h1 class="fade">Dedicated Fleet &amp; Preferred Network</h1> 
     <h2 class="fade">Real Time Dispatch Technology</h2> 
     <h2 class="fade">Instant Proof of Delivery</h2> 
    </div> 
</li> 

이 있고이 당신의 CSS에서

#slides h1 

변경 (이 같은) 클래스에 다음 ID의

<div class="slides bkgd1"> 
<div class="slides bkgd2"> 
<div class="slides bkgd3"> 

그리고 변경하려면 따라서 CSS 선택자

.slides h1 

그리고 나서 제대로 작동합니다.

더 상세

FlexSlider 원활한 순환과 반복을 허용하기 위해 <div> 요소의 클론을 생성합니다. 복제본을 만들면 원본에서 ID를 복사하고 끝에 "_clone"을 추가합니다. 이것은 실제로 사이클을 통해 첫 번째 슬라이드로 돌아 가면 볼 수 있습니다. 따라서 CSS 스타일 (#slides h1 등)이 적용되지 않습니다.

또한이 대답에서 내가 언급 한 첫 번째 이유 때문에 단순히 #slides h1, #slides_clone h1을 추가하는 것만으로는 충분하지 않습니다. ID는 고유해야합니다.