Carrousel Javascript
Bonjour à toutes et à tous.
Merci à Grafikart pour ses tutos très intéressants et vraiment bien expliqués.
Mon problème est le suivant ; Suite au tutoriel vidéo jQuery : Carrousel Javascript, dès lors que l'on arrive au Javascript, et qu'après avoir créer mes slides, je les appelle grace à la commande "alert", rien ne se passe...
C'est à la 16e minute de la vidéo.
Voici mes codes HTML
DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>Carrousel</title>
<meta name="keywords" lang="fr" content="motcle1,mocle2" />
<meta name="description" content="Description de ma page web." />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="fr" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="carrousel.js"></script>
<link href="carrousel.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="conteneur">
<div id="carrousel">
<div id="slide1" class="slide">
<div class="visu">
<img src="images/slide1.jpg"/>
</div>
<div class="title">
Un titre 1
</div>
</div>
<div id="slide2" class="slide">
<div class="visu">
<img src="images/slide2.jpg"/>
</div>
<div class="title">
Un titre 2
</div>
</div>
<div id="slide3" class="slide">
<div class="visu">
<img src="images/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>Et le Javascript
/*
CARROUSEL.JS
*/
var carrousel = {
nbSlide : 0,
nbCurrent : 1,
elemCurrent : null,
elem : null,
init : function(elem){
this.nbSlide = elem.find(".slide").length;
}
}
$(function(){
carrousel.init($("#carrousel"));
alert(carrousel.nbSlide);
});Merci bien !
17 réponses
Vérifie grâce à la console JavaScript (FireBug ou autre). Si avec ça tu n'arrives toujours à rien, donne-nous le message d'erreur (si il y en a un) que ta console te donne.
Vérifie l'emplacement des scripts: <script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="carrousel.js"></script>
Vide le cache du navigateur également et relance, l'alert m'affiche 3 moi
Ba atttend je te file mon code js
var carrousel = {
nbSlide : 0,
nbCurrent : 1,
elemCurrent : null,
elem : null,
init : function(elem){
this.nbSlide = elem.find(".slide").length;
}
}
$(function(){
carrousel.init($("#carrousel"));
alert(carrousel.nbSlide);
});Sa viens plutot d'un probleme de variable ou de selecteur parce que l'alert est afficher chez moi
Opera ;) mais je viens de tester avec chrome sa affiche la même chose.
Je t'envoie mon html peut-etre que le probleme viens de la
(J'ai une methode tres ordonée aussi tous mes elements ont des noms UNIQUE mais j'ai renomé pour le tuto :D)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta lang="fr-FR"/>
<link href="style.css" rel="stylesheet" type="text/css" media="screen"/>
<link rel="shortcut icon" type="image/png" href="favicon.png" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/carrousel.js"></script>
<title>Cabillaud94 | Webmaster</title>
</head>
<body>
<div id="page-sup">
<!--NAME-->
<div id="name-sup">
<a href="index.php" title="Name">
- Cabillaud94 -
</a>
</div>
<!--MENU-->
<div id="menu-sup">
<ul>
<li title="Home"><a href="index.php">? Home ?</a></li>
<li title="Team"><a href="team.php">? Team ?</a></li>
<li title="Work"><a href="work.php">? Work ?</a></li>
<li title="Shop"><a href="shop.php">? Shop ?</a></li>
<li title="Contact"><a href="contact.php"> ? Contact ? </a></li>
</ul>
</div>
</div>
<div id="page-cen">
<div id="carrousel-cen">
<div id="slide1-cen" class="slide">
<div class="visuel">
<img src="img/slide1.jpg"/>
</div>
<div class="titlecarrousel-cen">
Slide
</div>
</div>
<div id="slide2-cen" class="slide">
<div class="visuel">
<img src="img/slide2.jpg"/>
</div>
<div class="titlecarrousel-cen">
Slide
</div>
</div>
<div id="slide3-cen" class="slide">
<div class="visuel">
<img src="img/slide3.jpg"/>
</div>
<div class="titlecarrousel-cen">
Slide
</div>
</div>
<div id="slide4-cen" class="slide">
<div class"visuel">
<img src="img/slide4.jpg"/>
</div>
<div class="titlecarrousel-cen">
Slide
</div>
</div>
<!--<div class="nav-cen">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>-->
</div>
</div>
<div id="page-bot"></div>
<div id="do-bot">
? I DO WEBSITE ?
</div>
<div id="whatido-bot">
<ul>
<li title="Design"><div class="whatidospace-bot"><a href="work.php">z</a></div><br/></li>
<li title="Technology"><div class="whatidospace-bot"><a href="work.php">H</a></div><br/></li>
<li title="Ergonomics"><div class="whatidospace-bot"><a href="work.php">-</a></div><br/></li>
<li title="Price"><div class="whatidospace-bot"><a href="work.php">:</a></div><br/></li>
<li title="Documentation"><div class="whatidospace-bot"><a href="work.php"></a></div><br/></li>
</ul>
</div>
<div id="whatidotext-bot">
<ul>
<li>- Design -<br/><p>All my sites are strictly unique, everyone has the latest fashion.</p></li>
<li>- Technology -<br/><p>I use the latest technology in website design.<br/>(HTML5/CSS3/PHP5)</p></li>
<li>- Erogonomics -<br/><p>All my sites are designed to be easy to be use for everyone.</p></li>
<li>- Price -<br/><p>I offer different packages to suit me every budget.<br/>Let's check in the Shop.</p></li>
<li>- Documentation -<br/><p>All my sites are provided with full documentation and quality</p></li>
</ul>
</div>
<div id="sceau-bot">
<a href="#" title="Cabillau94 Website">
MADE BY CABILLAUD94
</a>
</div>
</body>
</html>Ps: je l'ai pas encore deboger :D
Ha bah forcément que ça peut pas marcher...
<div id="carrousel-cen"> dans l'html
carrousel.init($("#carrousel-cen")); dans le js...
Avec ça ça devrait être mieux: carrousel.init($("#carrousel-cen")); ^^