jquery - flexslider 多控制导航

Question

在这种情况下，使用了单个 flexslider 实例，但需要使用两个控制导航，即 2 x controlNav 和没有 directionNav。该设计需要滑块顶部的控制导航和滑块上的控制导航，两者在功能上是相同的，只是样式不同。

我无法让滑块与 2 个导航一起使用。我尝试使用 jquery 的克隆和以下使用 flexslider 的同步和 asNavFor 函数的代码。

该网站可以在http://virtual1.blueplanetdns.com找到

<?php
if( function_exists('get_field') ){

    if(get_field('slider_item')): ?>

    <?php if(get_field('slide_interval')) 
    {
        $interval = get_field('slide_interval');
        $intervalMultiplied = $interval * 1000 ; 
    }
    else
    {
        $intervalMultiplied = '5000';
    }
    ?>

    <script type="text/javascript">
        $(window).load(function() {
            $('.flexslider-manual-controls-second').flexslider({
                directionNav: false,
                controlNav: false,
                asNavFor: ".flexslider"
          });
        });
    </script>

    <script type="text/javascript">
        $(window).load(function() {
            $('.flexslider').flexslider({
              animation: "fade",
              //controlsContainer: ".flexslider-container",
              manualControls: ".flexslider-manual-controls li a",
              directionNav: false,
              slideshow: true,
              slideshowSpeed: <?php echo $intervalMultiplied; ?>,
              animationLoop: true,           
              pauseOnAction: false,
              pauseOnHover: true,
              sync: ".flexslider-manual-controls-second"
          });
        });
    </script>

    <div class="flexslider-container clearfix">

        <div class="flexslider-manual-controls-second">
            <ul class="slides">
                <?php while(has_sub_field('slider_item')): ?>
                    <li class="secondaryNav-item">
                    </li>       
                <?php endwhile; ?> 
            </ul>
        </div>

        <div class="flexslider">
            <ul class="slides">
                <?php while(has_sub_field('slider_item')): ?>
                    <?php
                    //Image 
                    $attachment_object = get_sub_field('slider_background_image');
                    $size = "slider";
                    //var_dump($attachment_object);

                    $image_url = wp_get_attachment_image_src( $attachment_object['id'], $size );
                    //var_dump($image_url);
                    //$image_title = $attachment_object['title'];
                    //$image_alt = $attachment_object['alt'];
                    //$image_description = $attachment_object['description'];
                    ?>
                    <li class="slider-item" style="background:url('<?php echo $image_url[0]; ?>') no-repeat left top;">
                        <div class="slider-content">
                            <?php if(get_sub_field('slider_title')) echo '<h2 class="slider-title">'.get_sub_field('slider_title').'</h2>'; ?>
                            <?php if (get_sub_field('slider_link')) echo '<a class="slider-link" href="'.get_sub_field('slider_link').'">Find out more</a>'; ?>
                        </div>
                    </li><!-- end slide-item -->       
                <?php endwhile; ?> 
            </ul>

            <ul class="flexslider-manual-controls">
                <?php while(has_sub_field('slider_item')): ?>

                    <li class="nav-item">
                        <a href="#"><?php echo get_sub_field('slider_tab_title'); ?></a>
                    </li>

                <?php endwhile; ?>
            </ul>

        </div>                            
    </div>          
<?php 
endif; 

}
?>                                                                              

谢谢

Answer 1

一种可能的解决方案是创建自己的导航按钮并设置样式，并使用 jQuery 将它们与 flexslider 集成。试试下面的代码。

html:

<div class="new-nav">
  <a href="" class="new-flex-next">next</a>
  <a href="" class="new-flex-previous">previous</a>
</div>

JS：

$('.new-nav').on('click', 'a', function(event) {
  event.preventDefault();

  target = {
    next: $('.flexslider').data('flexslider').getTarget('next'),
    previous: $('.flexslider').data('flexslider').getTarget('prev')
  };

  if ( $(this).hasClass('new-flex-next') ){
    $('.flexslider').data('flexslider').flexAnimate(target.next);
  }
  else if ( $(this).hasClass('new-flex-previous') ){
    $('.flexslider').data('flexslider').flexAnimate(target.previous);
  }
});