Due to a layout issue I am trying to utilise the .flex-caption outside of the flexslider itself.

Can you think of a way I can achieve this?

Ideally the markup would be structured like this:

<div class="flexslider gallery">
<ul class="slides">
<li><img src="image.jpg"  /></li>
</ul>
</div>

<p class="flex-caption">Caption</p>

Due to a layout issue I am trying to utilise the .flex-caption outside of the flexslider itself.

Can you think of a way I can achieve this?

Ideally the markup would be structured like this:

<div class="flexslider gallery">
<ul class="slides">
<li><img src="image.jpg"  /></li>
</ul>
</div>

<p class="flex-caption">Caption</p>

• javascript
• css
• flexslider

Share Improve this question Follow asked Aug 31, 2012 at 23:12 Niall ThompsonNiall Thompson 36511 gold badge44 silver badges1313 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 6

This solved it without the need for an additional slider:

$captions = $('.captions');

$('.flexslider').flexslider({
    animation: "fade",
    controlNav: true,
    directionNav: false,
    slideshow: false,
    prevText: "Previous",
    nextText: "Next",
    useCSS: true,
    touch: true,
    start: function() {
        $activecaption = $('.flex-active-slide .flex-caption');
        $captions.html($activecaption.text());        
    },
    after: function() {
        $activecaption = $('.flex-active-slide .flex-caption');
        $captions.html($activecaption.text());
    }
});

See example here. ​

Just had the same issue and found a link that helped me solve the issue. Also this is assuming you are looking for the caption to change with the slider navigation.

https://github./woothemes/FlexSlider/issues/108

Basically it involves creating two separate flexsliders and linking them together with navigation controls using this option on the caption slider:

start: function(slider){

            $('.flex-direction-nav li a').click(function(event){
              event.preventDefault();
              var dir = $(this).text().toLowerCase();
              slider.flexAnimate(slider.getTarget(dir));
            });
        }

FYI though, the functionality doesn't seem to work on mobile. Looking into that further.

This solution worked well for me. Thanks! You can also do this with an image caption, instead of text.

after: function() {
   $activecaption = $('.flex-active-slide .flex-caption img');
   $activecaption.clone().prependTo($captions);
}

you want to copy the element, first, then prepend it.