jquery - thumbnail - controles de navegación múltiple flexslider

flexslider thumbnail

Question

En este escenario, se usa una sola instancia de flexslider, pero necesita trabajar con dos controles de navegación, que son 2 x controlNav y no directionNav. El diseño necesita un control de navegación en la parte superior del control deslizante y un control de navegación en el control deslizante, ambos son idénticos en términos de funcionalidad y tienen un estilo diferente.

No puedo hacer que el deslizador funcione con 2 navs. He intentado usar el clon de jquery y el siguiente código que usa las funciones sync de flexslider y asNavFor.

El sitio se puede encontrar en 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; 

}
?>                                                                              

Gracias

Answer 1

Una posible solución es crear y diseñar sus propios botones de navegación y usar jQuery para integrarlos con flexslider. Pruebe el código a continuación.

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