Bonjour,

Je fais actuellement mon Carrousel avec ce tuto.

Seulement, alors que je n'en suis qu'au début de l'édition du javascript (mise en place de la pagination), je peux déjà me rendre compte que ça ne fonctionne pas, la pagination n'apparaissant même pas.
Le problème ne vient pas de l'inclusion de jquery, puisqu'une vidéo en flash l'utilise et fonctionne très bien.

Pour le code css/html/js, j'ai recopié celui de la vidéo, je pense donc qu'il ne doit pas y avoir de soucis.

Le seul soucis potentiel pourrait donc provenir de l'inclusion de carrousel.js ... seulement j'ai fais la même chose que l'inclure que pour jquery et les deux autres fichiers .js de la vidéo flash ...

Donc là je suis un peu paumé.

Voilà mes inclusions :

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/carrousel.js"></script>
<script type="text/javascript" src="js/swfobject.js"></script>
<script type="text/javascript" src="js/jqvideobox.js"></script>

<link rel="stylesheet" href="css/carrousel.css" type="text/css" media="screen" />

Le fichier d'index (la partie intéressante) :

<div id="conteneur_carrousel">
			<div id="carrousel">
				<div id="slide1" class="slide">
					<div class="visu">
						<img src="images/slide1.png" />
					</div>
					<div class="title">
						Slide1
					</div>
				</div>
				
				<div id="slide2" class="slide">
					<div class="visu">
						<img src="images/slide2.png" />
					</div>
					<div class="title">
						Slide2
					</div>
				</div>
				
				<div id="slide3" class="slide">
					<div class="visu">
						<img src="images/slide3.png" />
					</div>
					<div class="title">
						Slide3
					</div>
				</div>
				
				<!--
				<div class="navigation">
					<span>1</span>
					<span>2</span>
					<span>3</span>
				</div>
				-->
			</div>
	  </div>

Le CSS :

#carrousel
{
	border: solid 5px #edd7b4;
	width: 466px;
	height: 218px;
	margin: 0 auto;
	position: relative;
}

.slide
{
	position: absolute;
	top: 0;
	left: 0;
	width: 466px;
	height: 218px;
}

.title
{
	position: absolute;
	padding-left: 12px;
	width: 454px;
	height: 30px;
	line-height: 30px;
	bottom: 0;
	left: 0;
	background: url(images/opaque.png) top left repeat;
}

.navigation
{
	position: absolute;
	bottom: 33px;
	left: 400px;
}

.navigation span
{
	background: #000;
	color: #FFF;
	padding: 2px 4px;
}

.navigation span:hover
{
	background: #FFF;
	color: #000;
	cursor: pointer;
}

Et le Js :

var carrousel = {

	nbSlide : 0,
	nbCurrent : 1,
	elemCurrent : null,
	elem : null,
	
	init : function(elem) {
		this.nbSlide = elem.find(".slide").length;
		
		//Créer la pagination
		elem.append("<div class="navigation"></div>");
		for (var i = 1 ; i <= nbSlide ; i++ ){
			elem.find(".navigation").append("<span>"+i+"</span>");
		}
	}

}

$(function($('#carrousel')){
	carrousel.init;
	alert(carrousel.nbSlide);
});

(C'est donc sensé afficher le nombre de Slide, et rien n'apparait. Ni les marques de pagination d'ailleurs).


Je vous ai mis tout le code relatif au carrousel car là je vois vraiment pas où est le problème ...

Merci d'avance à ceux qui me répondront.

Pour voir en ligne : http://prieure-de-sion.agsahosting.com/euro1400/index.php

Salut,

Il serait bon d'apprendre à utiliser des outils de debugage, car l'erreur est assez flagrante à l'oeil nu, et un outil te l'aurait de suite repéré.

Remplace

elem.append("<div class="navigation"></div>");

par

elem.append("<div class='navigation'></div>");

De plus, je ne comprends pas bien ce que tu cherches à faire en faisant :

$(function($('#carrousel')){
	carrousel.init;
	alert(carrousel.nbSlide);
});

C'est ta façon personnelle d'utiliser le $().ready() ?

Effectivement, mais le javascript n'étant qu'un "plus" dans mes projets je n'ai jamais approfondi de ce côté là ... bien je vais me renseigner sur un debugger alors ...


A la fin ce n'est qu'un test pour voir si le javascript fonctionne correctement. De plus je ne fais que suivre le tuto, donc je suppose que cela sera utile par la suite.
Tout ce que je vois, c'est que lorsque lui lance sa page, y'a l'alert qui s'afffiche et la pagination sur les slider, et que moi rien ne se passe


Le fait de changer ce que tu m'as dit ne change rien :s



EDIT : TROUVE ! Grâce à la console Js de Chrome, merci de m'avoir ouvert les yeux sur cet outil
Lorsque j'appelais nbSlide dans le for, fallait mettre this. devant