利用Flexslider的字幕

Utilise Flexslider caption outslide of Flexslider

本文关键字：字幕 Flexslider 利用      更新时间：2023-09-26

由于布局问题，我试图在flex滑块本身之外使用.flex标题。

你能想出一个办法让我做到这一点吗？

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

<div class="flexslider gallery">
<ul class="slides">
<li><img src="image.jpg"  /></li>
</ul>
</div>
<p class="flex-caption">Caption</p>

这在不需要额外滑块的情况下解决了问题：

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

请参阅此处的示例。​

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

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

不过，仅供参考，该功能似乎在移动设备上不起作用。进一步研究。

这个解决方案对我来说效果很好。谢谢！您也可以使用图片说明而不是文本来完成此操作。

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

你想复制元素，首先，然后准备它。

相关文章：