Flex Slider - How to add same controls for two sliders

Question

I am using Flex slider for one project. I need to control two sliders on one page with same controls.

One part is main slider that will show images, and the second o

Answer 1

I want to confirm that MrBandersnatch's solution works. I'm posting my alterations of his code below to show a variation of his work.

/** 
* 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

});