Flexslider가 첫 번째로드에서 뷰포트 내의 센터링을 작동하지 않습니다.

Question

플렉스 슬라이더를 사용하여 0.5 투명도로 내 비활성 슬라이드를 사용하고 무엇이든지 표시하려고합니다. 뷰포트는 1280 픽셀 폭으로 설정되고 슬라이드 은이 뷰포트 내에 있어야합니다. 그러나 페이지의 첫 번째로드에서는 슬라이더가 다음 슬라이드로 이동하고 그 이후 슬라이드 될 때까지 li은 뷰포트의 중앙에 있지 않습니다.

나는 문제의 데모를했습니다 : http://jsfiddle.net/XMXGJ/94/

돼있로 그 다음 다음 슬라이드로 리 센터를 이동할 때까지, 당신은이 슬라이드의 일부를 볼 첫 번째로드에 알 수 있습니다.

데모 용으로 flexslider를 350px으로 설정했습니다. 첫 번째로드에서 뷰포트 중앙에 첫 번째 슬라이드를 가져오고 싶습니다.

되는 HTML :

<div class="flexslider loading"> 
    <ul class="slides"> 
    <li> 
     <img src="http://placehold.it/350x150" /> 
    </li> 
    <li> 
     <img src="http://placehold.it/350x150" /> 
    </li> 
    <li> 
     <img src="http://placehold.it/350x150" /> 
    </li> 
    <li> 
     <img src="http://placehold.it/350x150" /> 
    </li> 
    </ul> 
</div> 

JS :

$('.flexslider').flexslider({ 
    animation: "slide", 
    animationLoop: true, 
    startAt: 0, 
    start: function(slider) { 
     slider.removeClass('loading'); 
    } 
}); 

CSS :

.flexslider { 
    margin: 0; 
    height: 483px; 
    background: #fff; 
    position: relative; 
    zoom: 1; 
    overflow: hidden; 
} 

.flex-viewport { 
    width: 350px; 
    margin: 0 auto; 
    overflow: visible; 
    max-height: 2000px; 
    -webkit-transition: all 1s ease; 
    -moz-transition: all 1s ease; 
    -o-transition: all 1s ease; 
    transition: all 1s ease; 
} 

.loading { 
    max-height: 483px; 
} 

.flexslider .slides { 
    zoom: 1; 
} 

.flexslider .slides li { 
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50); 
    opacity: 0.5; 
} 
.flexslider .slides li.flex-active-slide { 
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); 
    opacity: 1; 
} 

.carousel li { 
    margin-right: 5px; 
} 

Answer 1

프레젠테이션이 .. 선형 서열에 표시되는 I 인라인 스타일을 첨가 하였다.

<div class="flexslider loading" style="text-align:center;"> 
<ul class="slides" style="margin:0 auto;"> 
<li> 
    <img src="http://placehold.it/350x150" /> 
</li> 
<li> 
    <img src="http://placehold.it/350x150" /> 
</li> 
<li> 
    <img src="http://placehold.it/350x150" /> 
</li> 
<li> 
    <img src="http://placehold.it/350x150" /> 
</li> 
</ul> 
</div> 
</center>