Flexslider - 자막을 슬라이더 바깥에 표시하는 방법은 무엇입니까?

Question

Im 엄지 회전 목마가있는 슬라이더를 만들었습니다. 각 슬라이더 항목에 캡션이 있습니다. 이제 슬라이더 외부에 캡션을 표시하고 싶습니다. 캡션이 표시되지만 슬라이더와 함께 슬라이드되지 않습니다.

어떻게 해결할 수 있습니까?

<div id="wrapper"> 
    <div id="container"> 
    <div id="slider" class="slider"> 
      <ul class="slides"> 
     <li><img class="image" src="image_1.jpg" /></li> 
       <li><img class="image" src="image_2.jpg" /></li> 
       <li><img class="image" src="image_3.jpg" /></li> 
       <li><img class="image" src="image_4.jpg" /></li> 
      </ul> 
     </div> 
    </div> 
</div> 

<div class="captions"> 
    <ul class="slides"> 
    <li><p>Slide 1 caption</p></li> 
     <li><p>Slide 2 caption</p></li> 
     <li><p>Slide 3 caption</p></li> 
     <li><p>Slide 4 caption</p></li> 
    </ul> 
</div> 

<div id="footerwrapper"> 
    <div id="carousel" class="flexslider"> 
    <ul class="slides nd-gallery-list">  
     <li><img class="thumb" src="thumb_1.jpg"></li> 
      <li><img class="thumb" src="thumb_2.jpg"></li> 
      <li><img class="thumb" src="thumb_3.jpg"></li> 
      <li><img class="thumb" src="thumb_4.jpg"></li> 
    </ul> 
    </div> 
</div> 




<script type="text/javascript"> 
$(window).load(function() { 

    $('#carousel').flexslider({ 
    animation: "slide", 
    controlNav: false, 
    animationLoop: false, 
    slideshow: false, 
    itemWidth: 103, 
    itemMargin: 0, 
    asNavFor: '#slider' 
    }); 

    $('#slider').flexslider({ 
    animation: "slide", 
    controlNav: false, 
    animationLoop: false, 
    slideshow: false, 
    animationSpeed: 1, 
    sync: "#carousel", 
    }); 
}); 
    </script> 

프로젝트에 대한 링크 : http://goo.gl/H715x

접견,

Answer 1

아주 쉬운 - 및 - 더러운 트릭 : 당신은 .flex - 자막 선택에서 CSS 속성 position: absolute을 제거하는 경우 캡션은 이미지 자체 아래에 배치됩니다. .css 파일을 수동으로 편집하거나 jQuery를 통해 dinamically 삭제할 수 있습니다.

결과가 스타일면에서 최고는 아니지만 CSS를 수정하여 더 나은 결과를 얻을 수 있습니다.