javascript - 在 Flexslider 外使用 Flexslider 字幕

Question

由于布局问题，我尝试在 flexslider 本身之外使用 .flex-caption。

你能想出一个办法让我实现这个目标吗？

理想情况下，标记的结构如下:

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

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

Answer 1

这解决了它而不需要额外的 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());
    }
});

参见示例 here .