Mal fonctionnement d'un carousel jquery - urgent

bonjour a tous;
je viens d'integrer 2 jcarousel sur la meme page.
pour décrire le fonctionnement :
le 1er sert a choisir une categorie, une fois cliqué sur une image du 1er carousel le 2 n'affiche que les image de la categorie selectionnée.

<script type="text/javascript">

jQuery(document).ready(function() {
    jQuery('#first-carousel').jcarousel({	wrap: 'circular'   });
	jQuery('#second-carousel').jcarousel({	wrap: 'circular'   });
});

</script>

                <ul id="first-carousel" class="jcarousel-skin-tango">
                    <li><a href="#" id="gallery1-show" class="hide-image"><img src="images/home/image1.png"/></a></li>
                    <li><a href="#" id="gallery2-show" class="hide-image"><img src="images/home/image2.png"/></a></li>
                    <li><a href="#" id="gallery3-show" class="hide-image"><img src="images/home/image3.png"/></a></li>
                    <li><a href="#" id="gallery4-show" class="hide-image"><img src="images/home/image4.png"/></a></li>
                  </ul>


                <ul id="second-carousel" class="jcarousel-skin-tango show-image">
                    <li class="first-class"><a href="dettaglio_prodotto.html"><img src="images/home/image1.png"  alt=""/></a></li>
                    <li class="first-class"><a href="dettaglio_prodotto.html"><img src="images/home/image1.png"  alt=""/></a></li>
                    <li class="first-class"><a href="dettaglio_prodotto.html"><img src="images/home/image1.png"  alt=""/></a></li>
                    <li class="first-class"><a href="dettaglio_prodotto.html"><img src="images/home/image1.png"  alt=""/></a></li>
                    
                    <li class="second-class"><a href="dettaglio_prodotto.html"><img src="images/home/image2.png"  alt=""/></a></li>
                    <li class="second-class"><a href="dettaglio_prodotto.html"><img src="images/home/image2.png"  alt=""/></a></li>
                    <li class="second-class"><a href="dettaglio_prodotto.html"><img src="images/home/image2.png"  alt=""/></a></li>
                    <li class="second-class"><a href="dettaglio_prodotto.html"><img src="images/home/image2.png"  alt=""/></a></li>
                 </ul>

 $(document).ready(function(){
     // show elements that were hidden for javascript disabled browser
     $(".hide-image").removeClass("hide-image") ;
     // hide elements that were shown for javascript disabled browser
     $(".show-image").css("display", "none");

		$("#second-carousel").show();
		 
     $("#gallery1-show").click(function(){
         $(".first-class").show();
         $(".second-class").hide(); // no more use
		 $(".third-class").hide(); // no more use
		 $(".fourth-class").hide();// no more use
         return false
     });
	 
     $("#gallery2-show").click(function(){
         $(".second-class").show();
         $(".first-class").hide(); // no more use
		 $(".third-class").hide(); // no more use
		 $(".fourth-class").hide(); // no more use
         return false
     });
}

le probleme c'est que lorsequ'on choisi une categorie, il affiche les images en bas mais il affiche un vide apres les images de la premiere categorie sans respecter la condition " wrap = ' circular ' "

merci d'avance pour vos idés