[javascript] Probleme de slides.jquery.js

Bonjour, a tous

Voila, j'ai un petit problème avec la librairie slides.jquery.js (je sais pas si on peut l'appeler comme ça ^^)
En faite je ne peux mettre qu'une seule galerie par page et moi je voudrais faire 4 galeries dans la même page et ensuite afficher celle que je veux en cliquant ou il faut avec AJAX

je vous mets mon code et le code de slides :
HTML

<div id="container"> 
 <p> Projet Bidule</p> 
 <div id="1"> 
  <div id="example"> 
   <div id="slides" > 
    <div class="slides_container" > 
     <img src="<?php echo IMPATH; ?>cabinetGory.jpg"  alt="Slide 7"> 
     <img src="<?php echo IMPATH; ?>HyundaiVannes.jpg"  alt="Slide 7"> 
     <img src="<?php echo IMPATH; ?>garageAudi.jpg"  alt="Slide 7"> 
     <img src="<?php echo IMPATH; ?>YvesRocher.jpg"  alt="Slide 7"> 
     <img src="<?php echo IMPATH; ?>saintAndreCubzac.jpg"  alt="Slide 7"> 
    </div> 
     
    <a href="#" class="prev" ><img src="<?php echo ICONPATH; ?>arrow-prev.png" width="48" height="86" alt="Arrow Prev"></a> 
    <a href="#" class="next" ><img src="<?php echo ICONPATH; ?>arrow-next.png" width="48" height="86" alt="Arrow Next"></a> 
   </div> 
   <img src="<?php echo ICONPATH; ?>example-frame.png" width="500" height="230" alt="Example Frame" id="frame"> 
  </div> 
 </div> 
 <div id="2" style="display :none;"> 
  <div id="example"> 
    
   <div id="slides" > 
    <div class="slides_container" > 
     <img src="<?php echo IMPATH; ?>cabinetGory.jpg"  alt="Slide 7"> 
     <img src="<?php echo IMPATH; ?>Saintedidier.jpg"  alt="Slide 7"> 
     <img src="<?php echo IMPATH; ?>garageAudi.jpg"  alt="Slide 7"> 
     <img src="<?php echo IMPATH; ?>YvesRocher.jpg"  alt="Slide 7"> 
     <img src="<?php echo IMPATH; ?>saintAndreCubzac.jpg"  alt="Slide 7"> 
    </div> 
     
    <a href="#" class="prev" ><img src="<?php echo ICONPATH; ?>arrow-prev.png" width="48" height="86" alt="Arrow Prev"></a> 
    <a href="#" class="next" ><img src="<?php echo ICONPATH; ?>arrow-next.png" width="48" height="86" alt="Arrow Next"></a> 
   </div> 
   <img src="<?php echo ICONPATH; ?>example-frame.png" width="500" height="230" alt="Example Frame" id="frame"> 
  </div> 
 </div> 
 <div id="3" style="display : none;"> 
  <div id="example"> 
    
   <div id="slides" > 
    <div class="slides_container" > 
     <img src="<?php echo IMPATH; ?>cabinetGory.jpg"  alt="Slide 7"> 
     <img src="<?php echo IMPATH; ?>SPIELAVAL.jpg"  alt="Slide 7"> 
     <img src="<?php echo IMPATH; ?>garageAudi.jpg"  alt="Slide 7"> 
     <img src="<?php echo IMPATH; ?>YvesRocher.jpg"  alt="Slide 7"> 
     <img src="<?php echo IMPATH; ?>saintAndreCubzac.jpg"  alt="Slide 7"> 
    </div> 
     
    <a href="#" class="prev" ><img src="<?php echo ICONPATH; ?>arrow-prev.png" width="48" height="86" alt="Arrow Prev"></a> 
    <a href="#" class="next" ><img src="<?php echo ICONPATH; ?>arrow-next.png" width="48" height="86" alt="Arrow Next"></a> 
   </div> 
   <img src="<?php echo ICONPATH; ?>example-frame.png" width="500" height="230" alt="Example Frame" id="frame"> 
  </div> 
 </div> 
 <div id="4" style="display : none;"> 
  <div id="example"> 
    
   <div id="slides" > 
    <div class="slides_container" > 
     <img src="<?php echo IMPATH; ?>cabinetGory.jpg"  alt="Slide 7"> 
     <img src="<?php echo IMPATH; ?>chambrayZIparking.jpg"  alt="Slide 7"> 
     <img src="<?php echo IMPATH; ?>garageAudi.jpg"  alt="Slide 7"> 
     <img src="<?php echo IMPATH; ?>YvesRocher.jpg"  alt="Slide 7"> 
     <img src="<?php echo IMPATH; ?>saintAndreCubzac.jpg"  alt="Slide 7"> 
    </div> 
     
    <a href="#" class="prev" ><img src="<?php echo ICONPATH; ?>arrow-prev.png" width="48" height="86" alt="Arrow Prev"></a> 
    <a href="#" class="next" ><img src="<?php echo ICONPATH; ?>arrow-next.png" width="48" height="86" alt="Arrow Next"></a> 
   </div> 
   <img src="<?php echo ICONPATH; ?>example-frame.png" width="500" height="230" alt="Example Frame" id="frame"> 
  </div> 
 </div> 
   

 <div id="gallery"> 

   <a onclick="affiche(1)" href="#"><img src="<?php echo IMPATHmin; ?>HyundaiVannes.jpg"  alt="Image" /></a> 
   <a onclick="affiche(2)" href="#"><img src="<?php echo IMPATHmin; ?>Saintedidier.jpg" alt="Image" /> 
   <a onclick="affiche(3)" href="#"><img src="<?php echo IMPATHmin; ?>SPIELAVAL.jpg"   alt="Image" /> 
   <a onclick="affiche(4)" href="#"><img src="<?php echo IMPATHmin; ?>chambrayZIparking.jpg"   alt="Image" /> 
 </div>             

  
</div> 

la partie qui je pense vous interessera du code de slide jquery :

$.fn.slides.option = { 
  preload: false, // boolean, Set true to preload images in an image based slideshow 
  preloadImage: '../media/photos/Icone/loading.gif', // string, Name and location of loading image for preloader. Default is "/img/loading.gif" 
  container: 'slides_container', // string, Class name for slides container. Default is "slides_container" 
  generateNextPrev: false, // boolean, Auto generate next/prev buttons 
  next: 'next', // string, Class name for next button 
  prev: 'prev', // string, Class name for previous button 
  pagination: true, // boolean, If you're not using pagination you can set to false, but don't have to 
  generatePagination: true, // boolean, Auto generate pagination 
  prependPagination: false, // boolean, prepend pagination 
  paginationClass: 'pagination', // string, Class name for pagination 
  currentClass: 'current', // string, Class name for current class 
  fadeSpeed: 500, // number, Set the speed of the fading animation in milliseconds 
  fadeEasing: '', // string, must load jQuery's easing plugin before https://gsgd.co.uk/splash/ 
  slideSpeed: 600, // number, Set the speed of the sliding animation in milliseconds 
  slideEasing: '', // string, must load jQuery's easing plugin before https://gsgd.co.uk/splash/ 
  start: 1, // number, Set the speed of the sliding animation in milliseconds 
  effect: 'slide', // string, '[next/prev], [pagination]', e.g. 'slide, fade' or simply 'fade' for both 
  crossfade: false, // boolean, Crossfade images in a image based slideshow 
  randomize: false, // boolean, Set to true to randomize slides 
  play: 0, // number, Autoplay slideshow, a positive number will set to true and be the time between slide animation in milliseconds 
  pause: 0, // number, Pause slideshow on click of next/prev or pagination. A positive number will set to true and be the time of pause in milliseconds 
  hoverPause: false, // boolean, Set to true and hovering over slideshow will pause it 
  autoHeight: false, // boolean, Set to true to auto adjust height 
  autoHeightSpeed: 350, // number, Set auto height animation time in milliseconds 
  bigTarget: false, // boolean, Set to true and the whole slide will link to next slide on click 
  animationStart: function(){}, // Function called at the start of animation 
  animationComplete: function(){}, // Function called at the completion of animation 
  slidesLoaded: function() {} // Function is called when slides is fully loaded 
 };

Vous pouvez trouver l'intégralité du code ici : https://slidesjs.com/