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

请参阅示例here。​

Answer 2

只是有同样的问题，并找到了一个链接，帮助我解决了这个问题。此外，这是假设您正在寻找的标题，以改变滑块导航。

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

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

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

您想要先复制元素，然后在前面添加元素。