2013-02-22 2 views
0

Im строит слайдер с большой карусели, его отлично работает! Каждый элемент слайдера получил титры, теперь я хочу показать титры за пределами слайдера. Подписи отображаются, но не будут скользить вместе со слайдером.Flexslider - Как показать подписи за пределами слайдера?

Как это исправить?

<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

здоровается,

ответ

0

очень-легко и грязный-трик: если вы удалите свойство CSS position: absolute из селектора .flex-заголовка надпись помещается ниже самого изображения. вы можете вручную отредактировать файл .css или удалить динамически через jQuery.

Результат на самом деле не самый лучший с точки зрения стиля, но вы можете добиться лучших результатов, сделав еще несколько изменений в CSS.