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

3 Answers 3

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.