Intégration slider Jquery

Fermé

sumator Messages postés 4 Date d'inscription dimanche 3 juillet 2011 Statut Membre Dernière intervention 21 août 2014 - 21 août 2014 à 08:59
Lerendra Messages postés 412 Date d'inscription jeudi 26 septembre 2013 Statut Membre Dernière intervention 28 mai 2018 - 21 août 2014 à 10:31

Bonjour à tous,

Je suis face à un problème. J'ai suivi un tutoriel sur youtube pour intégrer un slider en java avec Jquery dans le site internet de mon patron.

Malheureusement, lorsque j'arrive au moment de coder le mouvement au clic sur un bouton (suivant ou précédent) rien ne se passe. Je vous transmet le code html et js. En éspérant que vous puissiez m'aider.

Par avance merci et bonne journée !

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!-- TemplateBeginEditable name="doctitle" -->
<title>PIERRE-ALAIN DUPRAZ    ARCHITECTE  ETS FAS</title>
<!-- TemplateEndEditable -->
<style type="text/css">
<!--
#fond {
	position: absolute;
	width: 955px;
	height: 543px;
	margin-top:-271.5px;
	margin-left:-477.5px;
	background-color: #FFFFFF;
	layer-background-color: #FFFFFF;
	border: 1px none #FFFFFF;
	z-index: 1;
	visibility: visible;
	left:50%;
	top:50%;
}
#pad {
	position: absolute;
	visibility: visible;
	left: 66px;
	top: 0px;
	width: auto;
	height: auto;
	background-color: #FFFFFF;
	layer-background-color: #FFFFFF;
	border: 1px none #000000;
	z-index: 1;
	font-family: "Helvetica Light", Arial, sans-serif;
	font-size: 9pt;
	color: #999999;
}
#actualites {
	position: absolute;
	visibility: visible;
	left: 0px;
	bottom: 64px;
	width: auto;
	height: 13px;
	background-color: #FFFFFF;
	layer-background-color: #FFFFFF;
	border: 1px none #000000;
	z-index: 1;
	font-family: "Helvetica Light", Arial, sans-serif;
	font-size: 8pt;
	color: #999999;
}
#projets {
	position: absolute;
	visibility: visible;
	left: 0px;
	bottom: 48px;
	width: auto;
	height: 13px;
	background-color: #FFFFFF;
	layer-background-color: #FFFFFF;
	border: 1px none #000000;
	z-index: 1;
	font-family: "Helvetica Light", Arial, sans-serif;
	font-size: 8pt;
	color: #999999;
}
#publications {
	position: absolute;
	visibility: visible;
	left: 0px;
	bottom: 32px;
	width: auto;
	height: 13px;
	background-color: #FFFFFF;
	layer-background-color: #FFFFFF;
	border: 1px none #000000;
	z-index: 1;
	font-family: "Helvetica Light", Arial, sans-serif;
	font-size: 8pt;
	color: #999999;
}
#evenements {
	position: absolute;
	visibility: visible;
	left: 0px;
	bottom: 16px;
	width: auto;
	height: 13px;
	background-color: #FFFFFF;
	layer-background-color: #FFFFFF;
	border: 1px none #000000;
	z-index: 1;
	font-family: "Helvetica Light", Arial, sans-serif;
	font-size: 8pt;
	color: #999999;
}
#bureau {
	position: absolute;
	visibility: visible;
	left: 0px;
	bottom: 0px;
	width: auto;
	height: 13px;
	background-color: #FFFFFF;
	layer-background-color: #FFFFFF;
	border: 1px none #000000;
	z-index: 1;
	font-family: "Helvetica Light", Arial, sans-serif;
	font-size: 8pt;
	color: #999999;
}
#galerie {
	position: relative;
	visibility: visible;
	left: 66px;
	bottom: -32px;
	width: 679px;
	height: 509px;
	background-color: #FFFFFF;
	layer-background-color: #FFFFFF;
	border: 1px none #000000;
	font-family: "Helvetica Light", Arial, sans-serif;
	font-size: 9pt;
	color: #999999;
	overflow:hidden;
	z-index:2;

}
.slider {
	width:10000px;
	height:509px;
}	
#txt {
	position: absolute;
	visibility: visible;
	right: 0px;
	bottom: 34px;
	width: 190px;
	height: 475px;
	background-color: #FFFFFF;
	layer-background-color: #000000;
	z-index: 1;
	font-family: "Helvetica Light", Arial, sans-serif;
	font-size: 8pt;
	color: #999999;
}
.prec {
	position:absolute;
	height: 509px;
	width: 175px;
	background:url(../img/prec.png);
	left: 0px;
	bottom: 0px;
	cursor:pointer;
	z-index:1;
}
.prec:hover {
	background:url(../img/prec_over.png);
}
.suiv {
	position:absolute;
	height: 509px;
	width: 175px;
	background:url(../img/suiv.png);
	right: 0px;
	bottom: 0px;
	cursor:pointer;
	z-index:1;
}
.suiv:hover {
	background:url(../img/suiv_over.png);
}
a:link {
	color: #999999;
	text-decoration: none;
}
a:visited {
	color: #999999;
	text-decoration: none;
}
a:hover {
	color: #666666;
	text-decoration: none;
}
a:active {
	color: #666666;
	text-decoration: none;
}
-->
</style>

<script src="../js/jquery.js" type="text/javascript"></script>
<script src="../js/slider.js" type="text/javascript"></script>

<script type="text/javascript">
<!--
function MM_reloadPage(init) {  //reloads the window if Nav4 resized
  if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
    document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
  else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->
</script>
</head>

<body>
<div id="background">
	<div id="fond">
		<div id="pad"><a href="file:///Macintosh HD/Users/Thibault1/index.html"><b>PIERRE-ALAIN DUPRAZ</b>    ARCHITECTE  ETS 		FAS</a></div>
	  <div id="bureau"><a href="file:///Macintosh HD/Users/Thibault1/index.html">bureau</a></div>
	  <div id="evenements"><a href="file:///Macintosh HD/Users/Thibault1/index.html">événements</a></div>
      <div id="publications"><a href="file:///Macintosh HD/Users/Thibault1/index.html">publications</a></div>
      <div id="projets"><a href="file:///Macintosh HD/Users/Thibault1/index.html">projets</a></div>
      <div id="actualites"><a href="file:///Macintosh HD/Users/Thibault1/index.html">actualités</a></div>
      
      <div id="galerie">
      	<div class="slider">
        	<a><img src="../img/01.jpg" /></a>
            <a><img src="../img/02.jpg" /></a>
           	<a><img src="../img/03.jpg" /></a>
        </div>
      	<div class="suiv"></div>
        <div class="prec"></div>
      </div>
      
      <div id="txt"><b>CONSTRUCTION D'UNE VILLA</b> Collonge-Bellerive<br />
      Maître d'ouvrage : Privé
      <p align="justify">La parcelle, située au bord de la route, offre une pente longitudinale d'une hauteur équivalente à un demi-niveau. Cette particularité donne le point de départ de l'intégration de la maison dans son environnement exigu. La maison est constituée d'une succession de demi-niveaux profitant de relations privilégiées avec l'extérieur.<br />
      <br />
L'accès à la maison s'effectue par la route, au point bas de la parcelle. Le garage, intégré à l'ouvrage, est adossé à la parcelle voisine. Dans la continuité de la cuisine située au rez-de-chaussée, une terrasse extérieure, prolongée par une piscine, est couverte par le volume en porte-à-faux du séjour. Depuis la cuisine, un escalier distribue un demi-niveau plus haut, la salle à manger ainsi que la chambre principale.<br /> </p>
		<p><b>Projet 2011-2012<br />
      Réalisation 2012-2013</b></p>
      <p><b>Collaborateurs :</b><br />
      Mehdi Aouabed, Samuele Evolvi</p></div>
  </div>
</div>    
</body>
</html>

$(document).ready(function(){
s = new slider("#galerie");
});

var slider = function(id){
	self=this;
	this.div = $(id);
	this.slider = this.div.find(".slider");
	this.largeurCache = this.div.width();
	this.largeur = 0;
	this.div.find('a').each(function(){
		self.largeur+=$(this).width();	
		self.largeur+=parseInt($(this).css("padding-left"));
		self.largeur+=parseInt($(this).css("padding-right"));
		self.largeur+=parseInt($(this).css("margin-left"));
		self.largeur+=parseInt($(this).css("margin-right"));
	});
	this.prec = this.div.find(".prec");
	this.suiv = this.div.find(".suiv");
	this.saut = this.largeurCache;
	this.nbEtapes = this.largeur/this.saut;
	
	this.suiv.click(function(){
		self.slider.animate({
			left:-self.saut
		},1000);
	});
	
}

A voir également:

Intégration slider Jquery
Wow slider - Télécharger - Présentation
Google maps waze integration - Accueil - Guide transports et cartes
Slider kz - Forum Javascript
Jquery refresh dom ✓ - Forum Javascript
Idm integration module ✓ - Forum Téléchargement

1 réponse

Réponse 1 / 1

Lerendra Messages postés 412 Date d'inscription jeudi 26 septembre 2013 Statut Membre Dernière intervention 28 mai 2018 299
21 août 2014 à 10:31

Bonjour !

C'est normal que rien ne se passe. Tes

<div class="suiv"></div> <div class="prec"></div>

n'ont pas d'instruction ! Mise à part la position sur la page.

Je peux me permette de refaire ton code ?
Lerendra

Discussions similaires

Problème de transfert slider qui ne veut plus se charger

Comment bloquer l'intégration de vidéos Youtube ?

idm pour opera

Redirection Jquery onclick

Slider Avant / Après