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 之后，如果我点击图像滑动的导航按钮，而不是段落。

我试图将两个文本（文本持有者）和图像一起滑动。

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

Answer 1

您需要实现自己的nex / prev（根据您的要求，您可以添加导航图像等，这些仅用于演示nex / prev如何工作。）好像2 flexslider导航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);     
  });

Flexslider - 如何使用单个directionNav使两个滑块一起工作（图像和段落文本）？

1 个答案: