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

这解决了它，而不需要额外的滑块：

$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());
    }
});

请参见此处的示例。​</p>

Answer 2

刚刚遇到同样的问题，并找到了一个帮助我解决问题的链接。这也是假设您正在寻找要随滑块导航更改的标题。

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

基本上，它涉及创建两个单独的 flexslider，并使用标题滑块上的此选项将它们与导航控件链接在一起：

start: function(slider){

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

仅供参考，该功能似乎不适用于移动设备。进一步调查。

Answer 3

这个解决方案对我很有效。谢谢！您也可以使用图像标题而不是文本来执行此操作。

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

你想先复制元素，然后再添加它。