0

我正在用拇指旋转木马构建一个滑块，它工作得很好！每个滑块项目都有标题，现在我想在滑块之外显示标题。字幕正在显示，但不会与滑块一起滑动。

我怎样才能解决这个问题？

    <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

问候，

4

1 回答 1

0

very-easy-and-dirty-trick：如果您position: absolute从 .flex-caption 选择器中删除 css 属性，则标题将放置在图像本身的下方。您可以手动编辑 .css 文件或通过 jQuery 动态删除。

就样式而言，结果并不是最好的，但您可以通过对 CSS 进行更多修改来获得更好的结果。

于 2013-07-31T14:07:25.420 回答