<!--    Slideshow infini horizontal    -->    
<div id="slideshow" class="slideshow">
            
 <div id="slideshow-container">
                
 <div class="slide">
                  <img src="http://i39.servimg.com/u/f39/19/00/24/06/311.png" />              
 </div>
                        
 <div class="slide">
                  <img src="http://i39.servimg.com/u/f39/19/00/24/06/210.png" />              
 </div>
                            
 <div class="slide">
                    
 <h1>
  Slide 3 - Avec un texte long...  
 </h1>
                       <img src="http://i39.servimg.com/u/f39/19/00/24/06/311.png" />    
 </div>
                            
 <div class="slide">
                    
 <h1>
  Slide 4 - Autant que vous voulez...  
 </h1>
                  <img src="http://theme3.cssactif.com/logo.png" alt="CSSActif" />                  
 <p>
  Cupcake ipsum dolor. Sit amet bonbon. Pastry gummi bears wafer I love jujubes marzipan dragée tiramisu.  
 </p>
                
 </div>
                            
 <!--  
                Vous pouvez ajouter autant de slides que possible avec le template suivant :
              
                <div class="slide">
                    --- votre contenu ici ---
                </div>
               -->          
 </div>
        
</div>
      

/**slide**/
.slideshow,
.slide {
    width: 350px;
    height: 200px;
}

.slideshow {
    margin: 0;
    overflow: hidden;
}

.slideshow div {
    position: relative;
    top: 0;
    left: 0;
}
  
.slide {
    margin: 0;
    overflow: hidden;
  
    display: inline-block;
    vertical-align: middle;
      
    text-align: center;
    color: white;
}

.slide p {
    margin: 10px;
    text-align: justify;
}

/**slide**/

$(function () {
    //VARIABLES MODIFIABLES
    var delaiSwitch    = 5000;                    // Délai (en ms) d'affichage d'un slide
    var delaiTransition = 1000;                    // Délai (en ms) de l'animation de transition
    var direction      = 'left';                  // Sens (left ou right) du défilement
    var idSlideshow    = '#slideshow';            // ID du slideshow
    var idContainer    = '#slideshow-container';  // ID du container
  
    //VARIABLES SYSTEME
    var slideshowWidth  = parseInt($(idSlideshow).css('width'));
    var slideshowHeight  = parseInt($(idSlideshow).css('height'));
    var nbSlides        = $(idContainer+' > .slide').length;
  
    //ADAPTE LA TAILLE DU CONTENEUR AU NOMBRE DE BLOCS QU'IL CONTIENT
    $(idContainer).css('width', slideshowWidth*nbSlides+'px');

      
    //REDEFINIT LE CONTENU POUR SUPPRIMER LES EVENTUELS ECARTS DUS AUX BORDERS
    if(direction==='right') {
        var decalageLeft = -slideshowWidth*(nbSlides-1);
        $(idContainer).css('left', decalageLeft+'px');
      
        $(idContainer+' > .slide').each(function() {
            var el = $(this).remove();
            $(idContainer).prepend(el);
        }, this);
    } else {
        $(idContainer+' > .slide').each(function() {
            var el = $(this).remove();
            $(idContainer).append(el);
        }, this);
    }
  
    //ADAPTE LA TAILLE DES IMAGES AUX DIMENSIONS DU SLIDESHOW
    $(idSlideshow+' img').css('max-width', slideshowWidth);
    $(idSlideshow+' img').css('max-height', slideshowHeight);
  
    //LANCEMENT DE L'ANIMATION
    setInterval(function() {
        slideshow()
    }, delaiSwitch);
  
    //FONCTION DE DEFILEMENT
    function slideshow() {
        var compteur = 0;      // Compte les slides ayant bougé
      
        if(direction==='right') {
            $(idContainer+' > .slide').animate({left: '+='+slideshowWidth}, delaiTransition, function() {
                compteur++;
              
                // Lorsque le dernier slide à bougé, on crée la boucle
                if(compteur===nbSlides) {
                    var el = $(idContainer+' > .slide:last').remove();
                    $(idContainer).prepend(el);
                    $(idContainer+' > .slide').css('left', '0');
                  
                    compteur = 0;
                }
            });
        } else {
            $(idContainer+' > .slide').animate({left: '-='+slideshowWidth}, delaiTransition, function() {
                compteur++;
              
                // Lorsque le dernier slide à bougé, on crée la boucle
                if(compteur===nbSlides) {
                    var el = $(idContainer+' > .slide:first').remove();
                    $(idContainer).append(el);

                    $(idContainer+' > .slide').css('left', '0');
                  
                    compteur = 0;
                }
            });
        }      
    }
});