1

レイアウトの問題により、flexslider 自体の外で .flex-caption を利用しようとしています。

これを達成する方法を考えてもらえますか?

理想的には、マークアップは次のように構成されます。

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

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

3 に答える 3

6

これにより、追加のスライダーを必要とせずに解決しました：

$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>

于 2012-12-21T01:10:13.510 に答える
1

同じ問題が発生し、問題の解決に役立つリンクが見つかりました。また、これは、スライダーナビゲーションで変更するキャプションを探していることを前提としています。

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

基本的には、2つの別々のフレックススライダーを作成し、キャプションスライダーのこのオプションを使用してナビゲーションコントロールとリンクする必要があります。

start: function(slider){

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

参考までに、この機能はモバイルでは機能しないようです。それをさらに調べます。

于 2012-09-05T20:11:47.670 に答える