Flexslider-如何在滑塊外部顯示字幕？

Question

我用拇指旋轉木馬制作了一個Slider，效果很好！ 每個滑塊項目都有標題，現在我要在滑塊之外顯示字幕。 字幕正在顯示，但不會與滑塊一起滑動。

我怎樣才能解決這個問題？

    <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-caption選擇器中刪除css屬性position: absolute ，則字幕將放置在圖像本身下方。 您可以手動編輯.css文件，也可以通過jQuery進行動態刪除。

結果確實不是最好的樣式，但是您可以通過對CSS進行更多修改來獲得更好的結果。