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