Use jQuery to 'reset' functions to make plugins work

I'm using a jQuery image gallery (in this case, FlexSlider) to present several galleries on a page. Only one can be viewed at a time. To accommodate this, I'm using fadeIn/fadeOut after clicking a thumbnail. The problem is the gallery breaks. I've tried several, and they break in different ways. I'm sure there is a way to kind of 'reset' the plugin to keep it from breaking. Here's what I'm doing, which, when presenting multiple sliders on a page, should work according to the site:

jQuery:

<script type="text/javascript" charset="utf-8">
       $(window).load(function() {
 
         $('#main-slider').flexslider({
         animation:'fade',
         directionNav:true,
         controlsContainer: ".flex-container"
         });
 
         $('#secondary-slider').flexslider({
         animation:'fade',
         directionNav:true,
         controlNav:true,
         controlsContainer: ".flex-container"
         });
 
       });
 
       $(function(){
         $('#main-slider,#secondary-slider').hide();
 
 //1//       
 
   $('.gal_icon_1').click(function(){
         $('#secondary-slider').fadeOut(function(){
         $('#main-slider').fadeIn();
         });
   });
 
 //2//
 
    $('.gal_icon_2').click(function(){
         $('#main-slider').fadeOut(function(){
         $('#secondary-slider').fadeIn();
         });
   });
 
     });
     </script>
 

html:

<div class="container">
     <div id="main-slider" class="flexslider">
         <ul class="slides">
             <li>
                 <img src="images/BVL_CHANDRA-B_MM_2010_A3.jpg" />
             </li>
             <li>
                 <img src="images/BVL_CHANDRA-BLUE_MM_2010_A3.jpg" />
             </li>
             <li>
                 <img src="images/BVL_JEWELS_MM_2010_A3.jpg" />
             </li>
         </ul>
     </div>
 

As to simply fade one slider out and fade the other in. But when I do, it gets wonky. So, again, is there a way to kind of 'reset' the slider to get it to work on each div?

---