Flex Slider - Cómo agregar los mismos controles para dos controles deslizantes

Question

Estoy usando Flex slide r para un proyecto. Necesito controlar dos controles deslizantes en una página con los mismos controles.

Una parte es el control deslizante principal que mostrará las imágenes, y la segunda es el texto (en este caso, se tomará de "the_excerpt" en WP).

Básicamente, este es el código que estoy utilizando para llamar a dos diapositivas en una página:

$(window).load(function() { 
    $('#main-slider').flexslider({ 
     animation: 'slide', 
     controlsContainer: '.flex-container' 
    }); 

    $('#secondary-slider').flexslider(); 
    }); 

Ahora, tengo que "conectar" a ambos a los mismos controles, por lo que cuando hago clic en la flecha, se deslizará/se desvanecerá a ambos.

Answer 1

Puede lograr lo que está intentando hacer abandonando los controlesConfiguración del contenedor y creando su propia navegación que luego vinculará a ambos controles deslizantes. Aquí hay una idea de cómo (tenga en cuenta que no se ha probado)

Su marca se vería así. Tenga en cuenta el atributo rel en los enlaces, los usaremos a continuación. También tenga en cuenta que los valores comienzan desde 0; esto coincide con los valores de las diapositivas (por ejemplo, la primera diapositiva es 0, la segunda es 1, etc.).

<a rel="0" class="slide_thumb" href="#">slide link 1</a> 
<a rel="1" class="slide_thumb" href="#">slide link 2</a> 
<a rel="2" class="slide_thumb" href="#">slide link 3</a> 
<a rel="3" class="slide_thumb" href="#">slide link 3</a> 

<div id="main-slider" class="flexslider"> 
<ul class="slides"> 
    <li> 
     <img src="image1.jpg" /> 
    </li> 
    <li> 
     <img src="image2.jpg" /> 
    </li> 
    <li> 
     <img src="image3.jpg" /> 
    </li> 
    <li> 
     <img src="image4.jpg" /> 
    </li> 
</ul> 
</div> 

<div id="secondary-slider" class="flexslider"> 
<ul class="slides"> 
    <li> 
     <p>Text 1</p> 
    </li> 
    <li> 
     <p>Text 2</p> 
    </li> 
    <li> 
     <p>Text 3</p> 
    </li> 
    <li> 
     <p>Text 4</p> 
    </li> 
</ul> 

A continuación, establecer la llamada a flexslider

<script type="text/javascript" charset="utf-8"> 
jQuery(document).ready(function($) { 

$('#main-slider').flexslider({ 
    animation: "slide", 
    slideToStart: 0, 
    start: function(slider) { 
     $('a.slide_thumb').click(function() { 
      $('.flexslider').show(); 
      var slideTo = $(this).attr("rel")//Grab rel value from link; 
      var slideToInt = parseInt(slideTo)//Make sure that this value is an integer; 
      if (slider.currentSlide != slideToInt) { 
       slider.flexAnimate(slideToInt)//move the slider to the correct slide (Unless the slider is also already showing the slide we want); 
      } 
     }); 
    } 

}); 

$('#secondary-slider').flexslider({ 
    animation: "slide", 
    slideToStart: 0, 
    start: function(slider) { 
     $('a.slide_thumb').click(function() { 
      $('.flexslider').show(); 
      var slideTo = $(this).attr("rel")//Grab rel value from link; 
      var slideToInt = parseInt(slideTo)//Make sure that this value is an integer; 
      if (slider.currentSlide != slideToInt) { 
       slider.flexAnimate(slideToInt)//move the slider to the correct slide (Unless the slider is also already showing the slide we want); 
      } 
     }); 
    } 

}); 

}); 
</script> 

Básicamente ambos deslizadores están controladas por el mismo conjunto de enlaces de navegación. Piensa que esto debería hacerte avanzar en la dirección correcta, pero grita si necesitas algo explicado.

Answer 2

Por lo tanto, he estado teniendo el mismo problema y puede ser un verdadero lastre ... Pero he llegado a una solución rápida que es fácil como un pastel. Esto funcionará para 1 niño o cien niños controlados por el padre flexslider. Funciona para todas las acciones. Espero poder convencerlos para que arreglen esto y permitan una variedad de objetos jquery para su método de sincronización.

<div id="main-slider" class="flexslider"> 
    <ul class="slides"> 
    <li><img src="image1.jpg" /></li> 
    <li><img src="image2.jpg" /></li> 
    <li><img src="image3.jpg" /></li> 
    <li><img src="image4.jpg" /></li> 
    </ul> 
</div> 

<div class="flexslider_children"> 
    <ul class="slides"> 
    <li><p>Text 1</p></li> 
    <li><p>Text 2</p></li> 
    <li><p>Text 3</p></li> 
    <li><p>Text 4</p></li> 
    </ul> 
</div> 

<div class="flexslider_children"> 
    <ul class="slides"> 
    <li><p>Text 1</p></li> 
    <li><p>Text 2</p></li> 
    <li><p>Text 3</p></li> 
    <li><p>Text 4</p></li> 
    </ul> 
</div> 

Luego, para su javascript simplemente ejecute esto.

/** 
* Create the children flexsliders. Must be array of jquery objects with the 
* flexslider data. Easiest way is to place selector group in a var. 
*/ 
var children_slides = $('.flexslider_children').flexslider({ 
    'slideshow': false, // Remove the animations 
    'controlNav' : false // Remove the controls 
}); 

/** 
* Set up the main flexslider 
*/ 
$('.flexslider').flexslider({ 
    'pauseOnHover' : true, 
    'animationSpeed': 2000, 
    'slideshowSpeed': 5000, 
    'initDelay': 3000, 
    // Call the update_children_slides which itterates through all children slides 
    'before' : function(slider){ // Hijack the flexslider 
    update_children_slides(slider.animatingTo); 
    } 
}); 

/** 
* Method that updates children slides 
* fortunately, since all the children are not animating, 
* they will only update if the main flexslider updates. 
*/ 
function update_children_slides (slide_number){ 
    // Iterate through the children slides but not past the max 
    for (i=0;i<children_slides.length;i++) { 
    // Run the animate method on the child slide 
    $(children_slides[i]).data('flexslider').flexAnimate(slide_number); 
    } 
} 

Hope this helps !! Tenga en cuenta que agregué esto porque se parece mucho a lo que estaba tratando de hacer, parece que no soy el único que busca usar varias sincronizaciones en flexslider.

Answer 3

Quiero confirmar que la solución de MrBandersnatch funciona. Estoy publicando las modificaciones de su código a continuación para mostrar una variación de su trabajo.

/** 
* Create the children flexsliders. Must be array of jquery objects with the 
* flexslider data. Easiest way is to place selector group in a var. 
*/ 
var children_slides = $('.flexslider_children').flexslider({ 
    slideshow: false, // Remove the animations 
    controlNav : false, // Remove the controls 
    animationSpeed: 1200, 
    itemWidth: 175, 
    itemMargin: 20, 
    animation: 'linear', 
    easing: 'swing', 
    animationLoop: false, 
    minItems: getGridSize(), // use function to pull in initial value 
    maxItems: getGridSize() 
}); 


/** 
* Set up the main flexslider 
*/ 
$('#flexslider_index_band_1').flexslider({ 
    pauseOnHover : true, 
    animationSpeed: 1200, 
    slideshow: false, 
    initDelay: 3000, 
    directionNav: true, 
    animation: 'linear', 
    easing: 'swing', 
    animationLoop: false, 
    controlsContainer: '.paginated_nav', 
    directionNav: true, 
    prevText: '', 
    nextText: '', 
    itemWidth: 175, 
    itemMargin: 20, 
    sync: '#flexslider_index_band_2', 
    minItems: getGridSize(), // use function to pull in initial value 
    maxItems: getGridSize(), // use function to pull in initial value 
    // Call the update_children_slides which itterates through all children slides 
    before : function(slider){ // Hijack the flexslider 
     update_children_slides(slider.animatingTo); 
    } 
}); 

/** 
* Method that updates children slides 
* fortunately, since all the children are not animating, 
* they will only update if the main flexslider updates. 
*/ 
function update_children_slides (slide_number){ 
    // Iterate through the children slides but not past the max 
    for (i=0;i<children_slides.length;i++) { 
    // Run the animate method on the child slide 
    $(children_slides[i]).data('flexslider').flexAnimate(slide_number); 
    } 
} 

});

Answer 4

Para Flexslider 2, puede usar la opción sync: "selector". Simplemente configure uno de los controles deslizantes 'controlNav: false.

$(window).load(function() { 
    $('#main-slider').flexslider({ 
     animation: 'slide', 
     controlNav: true, 
     sync: '#secondary-slider' 
    }); 

    $('#secondary-slider').flexslider({ 
     controlNav: false 
    }); 
}); 

Answer 5

Una solución que encontré fue crear su propio banner de navegación personalizado. Colóquelo y póngalo como desee. Lo único importante es tener una forma de atacarlo. En este ejemplo, utilicé un control deslizante de -next y slider-prev.

<ul> 
    <li><a id="slider-next" href="#">Next</a></li> 
    <li><a id="slider-prev" href="#">Prev</a></li> 
</ul> 

Ahora, cree dos controles deslizantes Flexer y la posición de ellos sin embargo que le gustaría en el CSS. Voy a titular mi banner principal .flexslider y mi título .captions.

<div class="flexslider"> 
    <ul class="slides"> 
    <li><img src="/assets/images/banner-example.png" width="893" height="377"></li> 
    <li><img src="/assets/images/banner-example-2.png" width="893" height="377" /></li> 
    <li><img src="/assets/images/banner-example-3.png" width="893" height="377" /></li> 
    <li><img src="/assets/images/banner-example-4.png" width="893" height="377" /></li> 
    </ul> 
</div> 
<!-- Some other place in the code --> 
<div class="captions"> 
    <ul id="info" class="slides"> 
    <li> 
     <h2>Example Banner 1</h2> 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 
     <a href="read-more">Read More</a> 
    </li> 
    <li> 
     <h2>Example Banner 2</h2> 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 
     <a href="read-more">Read More</a> 
    </li> 
    <li> 
     <h2>Example Banner 3</h2> 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 
     <a href="read-more">Read More</a> 
    </li> 
    <li> 
     <h2>Example Banner 4</h2> 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 
     <a href="read-more">Read More</a> 
    </li> 
    </ul> 
</div> 

Ahora para la magia simple para que funcione. Active ambas diapositivas en su archivo javascript y oculte los controles de navegación de pancartas y leyendas en el css. De esta forma, su navegación personalizada será el único control visible. Luego, solo crea una función para activar el control deslizante y los controles de navegación de los subtítulos al hacer clic. Ejemplo abajo. La función .trigger jQuery es lo que hace la magia aquí. Consulte su documentación aquí: http://api.jquery.com/trigger/

//Load slider after .ready() 
$(window).load(function(){ 

    //Activate Both Banner and Caption slides 
    $('.flexslider').flexslider({ 
     controlNav: false, 
    }); 

    $('.captions').flexslider({ 
     controlNav: false, 
    }); 

    //Sink Control Navs 
    $('#slider-next').click(function(){ 
     $('.flexslider .flex-next').trigger('click'); 
     $('.captions .flex-next').trigger('click'); 
    }); 

    $('#slider-prev').click(function(){ 
     $('.flexslider .flex-prev').trigger('click'); 
     $('.captions .flex-prev').trigger('click'); 
    }) 
});