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

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

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

首先要复制元素，然后再添加它。

利用Flexslider的Flexslider标题

3 个答案: