Salut tout le monde,

Je cherche à faire un diaporama archi simple en Jquery qui affiche successivement 3 diapositives (déplacement horizontal vers la gauche), et le tout SANS bouton de commande. Le résultat actuel est un simple cadre statique visible sur l'image ci-dessous (en dessous du titre "Mes services") :


Aperçu de mon site en dev

<!-- Code dans le HEAD -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script src="javascript.js"></script>

<!-- Code dans la page d'accueil -->
<div id="slideshow">
  <div id="slidesContainer">
	<div class="slide"><a href="">Assitance à domicile</a></div>
	<div class="slide"><a href="">Formations à domicile</a></div>
	<div class="slide"><a href="">Suivis personnalisé</a></div>
  </div>
</div>

#slideshow #slidesContainer {
	margin: 0 auto;
	width: 600px;
	height: 250px;
	overflow: auto;
	border: 1px solid black;
}

#slideshow #slidesContainer .slide {
	margin: 0 auto;
	width: 580px; /* Si JS est désactivé, la barre de défilement apparaît */
	height: 250px;
}

// Contenu du fichier "javascript.js"
$(document).ready(function(){
	
	// Variables
	var slides = $('.slide');
	var largeurDiapos = 580;
	var positionActuelle = 0;
	var dureeAffichage = 4000;
	var dureeTransition = 1000;
	var nombreDeDiapos = slides.length;
	
	$('#slidesContainer').css('overflow', 'hidden');
	slides.wrapAll('<div id="slideInner"></div>').css({'float':'left', 'width':largeurDiapos});
	$('#slideInner').css('width', largeurDiapos * nombreDeDiapos);
	setInterval(dureeAffichage);
	$('#slideInner').animate({'marginLeft' : largeurDiapos * (-positionActuelle) }, dureeTransition);
	if(positionActuelle == nombreDeDiapos) {positionActuelle = 0;}
});

J'ai pas codé depuis des centaines d'année, aidez-moi s'il vous plait

Merci !

Pourquoi tu as 2 blocs div qui contiennent les 3 div ? Un seul suffit, non ?

Je ne sais pas. J'ai voulu adapter ce tutoriel. A vouloir trop le simplifier je l'ai défiguré. Pourtant je suppose que c'est très simple. La seule chose que j'arrive pas à faire, c'est le mouvement des diapos toutes les 4 secondes.

Bah à bien regarder le tuto, ton javascript est bien maigre vis à vis de celui du tuto.

Après acharnement j'ai réussi !

Je n'avais rien compris à la FONCTION setinterval que j'utilisais n'importe comment !

// Variables
	var diapos = $('.slide');
	var largeurDiapos = 600;
	var positionActuelle = 1;
	var dureeAffichage = 4000;
	var dureeTransition = 1000;
	var nombreDeDiapos = 3;
	
	
	// On cache la barre de défilement JS
	$('#slidesContainer').css('overflow', 'hidden');
	
	// On attribue #slideInner à toutes les div .slide et on met tous les diapos en float:left pour qu'ils s'affichent horizontalement
	diapos.wrapAll('<div id="slideInner"></div>').css({'float':'left', 'width':largeurDiapos});
	
	// La longueur de #slideInner est égale au total de la longueur de toutes les diapositives
	$('#slideInner').css('width', largeurDiapos * nombreDeDiapos);
	
	setInterval(function()
	{
		// Toutes les 4000 secondes, on affiche la diapositive suivante
		if ( positionActuelle != nombreDeDiapos && positionActuelle > 0 && positionActuelle < nombreDeDiapos )
		{
			$('#slideInner').animate({'marginLeft':largeurDiapos*(-positionActuelle)},dureeTransition);
			positionActuelle += 1;
		}
		// A la fin du diaporama, on recommence à la première diapositive
		else
		{
			$('#slideInner').animate({'marginLeft':0},dureeTransition);
			positionActuelle = 1;
		}
	}, dureeAffichage);