利用Flexslider的Flexslider字幕外露

由於佈局問題，我試圖利用flexslider本身之外的.flex-caption。利用Flexslider的Flexslider字幕外露

你能想出一個辦法來達到這個目的嗎？

理想的標記將被結構是這樣的：

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

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

來源

2012-08-31 Niall Thompson

剛剛有同樣的問題，並找到了一個鏈接，幫助我解決問題。此外，這是假設你正在尋找標題改變滑塊導航。

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

FYI雖然，功能似乎並沒有工作在移動。進一步研究。

來源

2012-09-05 20:11:47

這可以解決它，而無需額外的滑塊：http://jsfiddle.net/3Hq7Q/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。

來源

2012-12-21 01:10:13

有誰知道如何將格式和樣式應用到字幕元素？具體而言，我想添加額外的div，以便我可以有一個換行符。但這似乎並不奏效。 – MGDTech

這個解決方案對我來說效果很好。謝謝！你也可以用圖像標題來代替文本。

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

想要複製元素，首先，然後加上它。

來源

2015-04-19 05:59:40 mochadwi

利用Flexslider的Flexslider字幕外露

回答

相關問題