javascript - Flexslider - 如何使用单个 directionNav 使两个 slider 一起工作(图像和段落文本)？

Question

我的标记是

        <div class="slide_container">
             <div class='bg_container'>
                <div id='bg_slider' class='flexslider' >
                    <ul id='slide_set' class='slides'>
                        <li>image 1</li>
                        <li>image 2</li>
                        <li>image 3</li>
                        <li>image 4</li>            
                    </ul>
                    <div id='glass_div'></div> 
                </div>                    
            </div>
            <div class='tex_slide_container'>
                <div id='message' class='flexslider2'>
                    <ul id='content_slide_holder' class='slides'>
                        <li>
                            <div class='text_holder'>  
                                <div class='text_div'>text 1</div>
                            </div>                            
                        </li>
                        <li>
                            <div class='text_holder'>  
                                <div class='text_div'>text 1</div>
                            </div>                           
                        </li>
                        <li>
                            <div class='text_holder'>  
                                <div class='text_div'>text 1</div>
                            </div>                        
                        </li>
                        <li>
                            <div class='text_holder'>  
                                <div class='text_div'>text 1</div>
                            </div>                         
                        </li>   
                    </ul>    
                </div>                    
            </div>                    
        </div>

*我的 JS 脚本是:*

<script type="text/javascript">
    $(window).load(function() {
        $("#slide_row").show();
        var count = 0 ; 
        $("#loaing_animation").hide();

        $('.flexslider').flexslider(
        {
            animation: "slide",
            animationSpeed: 4000,
            easing: "swing",
            slideshowSpeed: 10000,
            touch:false,
            before: function(){
                if(count == 1 ){
                    $('#static_path').attr('id','moving_path');
                    $('.empty_wings').attr('class','wings');
                    $('.empty_body').attr('class','birdbody');
                }
                count++;                                              
            },
            after: function(){
            },controlNav: false,
            directionNav: true


        }           
    );
        $('.flexslider2').flexslider(
        {
            animation: "slide",
            animationSpeed: 2500,
            easing: "swing",
            slideshowSpeed: 10000,
            touch:false,
            before: function(){
            },
            after: function(){
            },
            controlNav: false,
            directionNav: true
        }           
    );          
    });
</script>

我的 CSS 是: here

我不愿意更改标记。

情况是在我启用 directionNav 之后，如果我单击 Nav 按钮，图像会滑动，而不是段落。

我正在尝试将文本(文本容器)和图像一起滑动。

我该怎么做？ 任何帮助将不胜感激。

Answer 1

您需要实现自己的 nex/prev(您可以根据您的要求添加导航器图像等，这些仅用于演示 nex/prev 如何工作。) 好像2个flexslider navigation html会冲突。并且只有一个会被导航。

Fiddle DEMO

  $("#next").on("click" , function (e) { 
     var $slider = flex1.data('flexslider');        
    $slider.flexAnimate($slider.getTarget("next"), true);  
    var $slider = flex2.data('flexslider');
     $slider.flexAnimate($slider.getTarget("next"), true);     
  });

  $("#prev").on("click" , function (e) { 
     var $slider = flex1.data('flexslider');        
    $slider.flexAnimate($slider.getTarget("prev"), true);  
    var $slider = flex2.data('flexslider');
     $slider.flexAnimate($slider.getTarget("prev"), true);     
  });