CODEWITHSUNDEEP
javascriptcssflexslider
Niall Thompson
Niall Thompson

Reputation: 365

Utilise Flexslider caption outslide of Flexslider

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>

Upvotes: 1

Views: 4118

Answers (3)

mochadwi
mochadwi

Reputation: 1268

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.

Upvotes: 0

Niall Thompson
Niall Thompson

Reputation: 365

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. ​

Upvotes: 6

Scott G
Scott G

Reputation: 11

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.com/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.

Upvotes: 1

Related Questions