Sujet Précédent Sujet Suivant

Erreur code javascript pour carrousel

Résolu/Fermé
jcfleur87 Messages postés 9 Date d'inscription jeudi 23 octobre 2008 Statut Membre Dernière intervention 26 juin 2014 - 23 juin 2014 à 11:36
 Marceilu - 27 mars 2016 à 14:38
Bonjour,

Voila j'ai trouvé un tutoriel très bien fait sur internet pour créer un carrousel en javascript avec jquery, j'ai suivi le tuto au complet en écrivant le code javascript comme sur la vidéo mais le problème c'est que quand je veu voir l'aperçu de ma page le javascript ne se lance pas quand je lance la console pour voir s'il y a des erreur j'ai "elem is undefined" à ligne 14. J'avoue que je suis absolument novice dans ce domaine et je ne comprend pas vraiment où est l'erreur. Est ce qu'il y aura une personne qui pourrait m'éclairer sur mon soucis ? 


/*
	CARROUSSEL JS
	*/
	
var carrousel = {
	
	nbSlide:0,
	nbCurrent:1,
	elemCurrent:null,
	elem:null,
	timer: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<=this.nbSlide;i++){
			elem.find(".navigation").append("<span>"+i+"</span>");
		}
		elem.find(".navigation span").click(function(){carrousel.gotoSlide($(this).text());})
		
		// Initialisation du carrousel
		this.elem=elem;
		elem.find(".slide").hide();
		elem.find(".slide:first").show();
		this.elemCurrent = elem.find(".slide:first");
		this.elem.find(".navigation span:first").addClass("active");
		
		// On crée le timer
		carrousel.play();
		// Stop quand on passe dessus
		elem.mouseover(carrousel.stop);
		elem.mouseout(carrousel.play);
	},
	
	gotoSlide : function(num){
		if(num==this.nbCurrent){return false;}
		
		/* Animation en fadein/fadeOut
		this.elemCurrent.fadeOut();
		this.elem.find("#slide"+num).fadeIn();
		*/
		/* Animation en Slide */
		var sens=1;
		if(num<this.nbCurrent){sens=-1;}
		var cssDeb ={"left":this.elem.width()};
		var cssFin ={"left":-this.elem.width()};
		this.elem.find("#slide"+num).show().css(cssDeb);
		
		this.elem.find("#slide"+num).animate({"top":0,"left":0},500);
		this.elemCurrent.animate(cssFin,500);
		

		this.elem.find(".navigation span").removeClass("active");
		this.elem.find(".navigation span:eq("+(num-1)+")").addClass('active');
		this.nbCurrent = num;
		this.elemCurrent = this.elem.find('#slide'+num);
	},
	
	next : function(){
		var num = this.nbCurrent+1;
		if(num>this.nbSlide){
			num = 1;
		}
		this.gotoSlide(num);
	},
	prev : function(){
		var num = this.nbCurrent-1;
		if(num<1){
			num = this.nbSlide;
		}
		this.gotoSlide(num);
	},
	stop : function(){
		window.clearInterval(carrousel.timer);
	},
	play : function(){
		window.clearInterval(carrousel.timer);
		this.timer = windows.setInterval("carrousel.next()",5000);
	}
	
}

$(function(){
	carrousel.init();
});
A voir également:

10 réponses

Réponse 1 / 10
Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 524
Modifié par Pitet le 23/06/2014 à 11:46
Salut,

Ta fonction init attend un objet jQuery en paramètre, correspondant vraisemblablement au conteneur de tes slides.

Si le conteneur de tes slides possède un identifiant, par exemple 
<div id="monCarrousel">
    <img src="..." alt="..." class="slide" />
    <img src="..." alt="..." class="slide" />
    <!-- ... -->
</div>


alors l'appel à ta fonction init devrait ressembler à : 
$(function(){
 carrousel.init($('#monCarrousel'));
});


Bonne journée
1
Réponse 2 / 10
Utilisateur anonyme
23 juin 2014 à 11:46
Bonjour

Je n'ai pas analysé en détail, mais il y a au moins une erreur : ta fonction init attend un élément en paramètre, et tu ne lui en fournis pas lors de l'appel : 
init:function(elem)

d'une part, puis : 
$(function(){
	carrousel.init();
});

D'après le code de ta page, je pense que l'élément attendu c'est celui d'id "carroussel". Il faudrait donc modifier : 
$(function(){
	carrousel.init("#carroussel");
});
1
,
Modifié par , le 15/11/2014 à 16:26
Java Script
0
Réponse 3 / 10
Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 524
23 juin 2014 à 12:38
C'est l'objet window à la place de windows : https://www.toutjavascript.com/reference/ref-window.php
1
Réponse 4 / 10
jcfleur87 Messages postés 9 Date d'inscription jeudi 23 octobre 2008 Statut Membre Dernière intervention 26 juin 2014 6
Modifié par jcfleur87 le 23/06/2014 à 11:38
Si ca peut vous aider à voir un peu mieux je vous met le code html de ma page de test.
Je vous remercie par avance pour vos réponse 

<html><head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
<link rel="stylesheet" href="carroussel.css" type="text/css" media="screen" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="carroussel.js"></script>
</head>
<body>
<div id="conteneur">
 <div id="carroussel">
  <div id="slide1" class="slide">
   <div class="visu">
    <img src="img/slide1.jpg">
   </div>
   <div class="title">
    Un titre
   </div>
  </div>
  <div id="slide2" class="slide">
   <div class="visu">
    <img src="img/slide2.jpg">
   </div>
   <div class="title">
    Un titre 2
   </div>
  </div>
  <div id="slide3" class="slide">
   <div class="visu">
    <img src="img/slide3.jpg">
   </div>
   <div class="title">
    Un titre 3
   </div>
  </div>
  <!--
  <div class="navigation">
  <span>1</span>
  <span>2</span>
  <span>3</span>
  </div>
  -->
 </div>
 
</div>
</body>
</html>
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 10
jcfleur87 Messages postés 9 Date d'inscription jeudi 23 octobre 2008 Statut Membre Dernière intervention 26 juin 2014 6
23 juin 2014 à 12:08
Merci à vous deux effectivement il y avait un bel oubli ;) ca fonctionne déjà un peu mieux par contre j'ai une nouvelle erreur à la ligne 80 la console me met ReferenceError: windows is not defined cela viendrait de quoi ? 

this.timer = windows.setInterval("carrousel.next()",5000);
0
Réponse 6 / 10
jcfleur87 Messages postés 9 Date d'inscription jeudi 23 octobre 2008 Statut Membre Dernière intervention 26 juin 2014 6
23 juin 2014 à 16:37
merci Pitet je viens de corriger Window au lieu de Windows maintenant le carrousel s'affiche et s'exécute correctement en automatique avec le timer à 5 secondes, les slides changent bien mais j'ai encore un soucis je m'en excuse mais lorsque je veu cliquer sur un des boutons de slides crée le carroussel bug aprés et ne fonctionne plus correctement les slides changent toutes les 0.5 secondes environ et sautent par moment (par exemple de 1 à 3 directement) donc la je comprend plus rien si cela vient du code javascript ou non. Est ce que vous savez pourquoi j'ai ce problème ?

Voici mon dernier code javascript mis à jour : 
/*
	CARROUSSEL JS
	
	*/
	
var carrousel = {
	
	nbSlide:0,
	nbCurrent:1,
	elemCurrent:null,
	elem:null,
	timer: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<=this.nbSlide;i++){
			elem.find(".navigation").append("<span>"+i+"</span>");
		}
		elem.find(".navigation span").click(function(){carrousel.gotoSlide($(this).text());})
		
		// Initialisation du carrousel
		this.elem=elem;
		elem.find(".slide").hide();
		elem.find(".slide:first").show();
		this.elemCurrent = elem.find(".slide:first");
		this.elem.find(".navigation span:first").addClass("active");
		
		// Création du timer
		carrousel.play();
		// Arret du carrousel par survol de la souris
		elem.mouseover(carrousel.stop);
		elem.mouseout(carrousel.play);
	},
	
	gotoSlide : function(num){
		if(num==this.nbCurrent){return false;}
		
		/* Animation en fadein/fadeOut
		this.elemCurrent.fadeOut();
		this.elem.find("#slide"+num).fadeIn();
		*/
		/* Animation en Slide */
		var sens = 1;
		if(num<this.nbCurrent){sens = -1;}
		var cssDeb ={"left":sens*this.elem.width()};
		var cssFin ={"left":-sens*this.elem.width()};
		this.elem.find("#slide"+num).show().css(cssDeb);
		
		this.elem.find("#slide"+num).animate({"top":0,"left":0},500);
		this.elemCurrent.animate(cssFin,500);
		

		this.elem.find(".navigation span").removeClass("active");
		this.elem.find(".navigation span:eq("+(num-1)+")").addClass('active');
		this.nbCurrent = num;
		this.elemCurrent = this.elem.find('#slide'+num);
	},
	
	next : function(){
		var num = this.nbCurrent+1;
		if(num>this.nbSlide){
			num = 1;
		}
		this.gotoSlide(num);
	},
	prev : function(){
		var num = this.nbCurrent-1;
		if(num<1){
			num = this.nbSlide;
		}
		this.gotoSlide(num);
	},
	stop : function(){
		window.clearInterval(carrousel.timer);
	},
	play : function(){
		window.clearInterval(carrousel.timer);
		this.timer = window.setInterval("carrousel.next()",5000);
	}
	
}

$(function(){
	carrousel.init($("#carroussel"));
});
0
Réponse 7 / 10
Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 524
Modifié par Pitet le 23/06/2014 à 17:06
Le problème vient peut-être de l'enchainement des deux animations : 
this.elem.find("#slide"+num).animate({"top":0,"left":0},500);
this.elemCurrent.animate(cssFin,500);


Ta deuxième animation (avec cssFin) doit-elle se dérouler lorsque la première animation est finie ?
Si oui, il faudrait lancer ta deuxième animation dans la fonction de callback de ton premier animate : 
this.elem.find("#slide"+num).animate({"top":0,"left":0}, 500, function() {
    // cette fonction est exécutée lorsque la première animation est terminée
    this.elemCurrent.animate(cssFin,500);
});
0
Réponse 8 / 10
jcfleur87 Messages postés 9 Date d'inscription jeudi 23 octobre 2008 Statut Membre Dernière intervention 26 juin 2014 6
24 juin 2014 à 17:24
merci pour ta réponse mais ca ne me change rien ca me fait le même bug j'ai hébergé ma page test si des fois ca peu aider à comprendre le comportement bizarre de mon carroussel
http://www.muaythai-chavelot.net/carroussel/index.html
0
Réponse 9 / 10
Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 524
24 juin 2014 à 17:36
Dans la fonction play(), remplace cette ligne : 
this.timer = window.setInterval("carrousel.next()",5000);

par celle-ci : 
carrousel.timer = window.setInterval("carrousel.next()",5000);


J'ai l'impression que ton code relance un nouvel intervalle à chaque fois au lieu d'utiliser le même.
0
Réponse 10 / 10
jcfleur87 Messages postés 9 Date d'inscription jeudi 23 octobre 2008 Statut Membre Dernière intervention 26 juin 2014 6
26 juin 2014 à 12:21
Ah super merci beaucoup pitet ca fonctionne parfaitement maintenant avec cette ligne ;) il me restait juste une dernière erreur lorsque je cliquais sur la 1ère slide le carrousel s'arrêtait et sur la 2 il repartait sur la 1 au lieu de la 3 j'ai réussi à trouver j'ai remplacer 
var num = this.nbCurrent + 1;
par 
var num = parseInt(this.nbCurrent) + 1;
merci encore ;)

je ferme le post en mettant résolu.
0
Marceilu
27 mars 2016 à 14:38
slt jcfjeur87 je suis dans le meme souci que j'aimerai comment tu as resolu le blem du slide 3 vers le slide 1 car chez moi ca crée toujours un bug ca bloc à au deuxième slide
0

Discussions similaires

Problème de décodeur TV Bouygues Telecom
Massi119 -
Turone37 -

188 réponses
Instagram "Désolé, une erreur s'est produite"
bananamilk -
cedric.masdeb -

60 réponses
Orange - Erreur P01 Netflix
DEMOZ43790 -
Malt -

1 réponse
Decodeur Orange erreur S05-05
Footeux_6210 -
jeanbern -

7 réponses
Erreur vidéo inconnue sur le Freebox Player
mouhaaV2.0 -
LH -

59 réponses