Intégrer un carousel dans ma page html

Résolu/Fermé
Debutant en webmastering
Messages postés
401
Date d'inscription
lundi 6 juin 2011
Statut
Membre
Dernière intervention
27 janvier 2021
- 21 mars 2012 à 09:24
Evodia
Messages postés
2
Date d'inscription
lundi 14 octobre 2013
Statut
Membre
Dernière intervention
15 octobre 2013
- 15 oct. 2013 à 10:42
Bonjour,

je viens de trouver un exemple de carousel que j'aimerais intégrer dans ma page, mais le problème c'est que je n'y parviens pas

le site est : http://www.starplugins.com/killercarousel
le second exemple de carousel (celui avec les drapeaux)

j'ai essayé de suivre leurs explications mais le seul rendu que j'obtiens ce sont les images et pas du tout l'effet présenté sur le site

pourtant j'ai bien intégré leur js :
<script type="text/javascript" src="cloud-carousel.1.0.5.js"></script>

8 réponses

AssassinTourist
Messages postés
5700
Date d'inscription
lundi 16 janvier 2012
Statut
Contributeur
Dernière intervention
23 mars 2022
1 300
21 mars 2012 à 11:07
Bonjour,

Avez-vous intégré jquery ?
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
1
Debutant en webmastering
Messages postés
401
Date d'inscription
lundi 6 juin 2011
Statut
Membre
Dernière intervention
27 janvier 2021
1
21 mars 2012 à 14:17
oui je l'avais aussi intégré
0
Debutant en webmastering
Messages postés
401
Date d'inscription
lundi 6 juin 2011
Statut
Membre
Dernière intervention
27 janvier 2021
1
21 mars 2012 à 16:07
si quelqu'un réussit à intégrer le carousel de http://www.starplugins.com/killercarousel
je veux bien savoir comment il a fait, car j'ai beau suivre les instructions j'i l'impression que rien n'y fait
0
Debutant en webmastering
Messages postés
401
Date d'inscription
lundi 6 juin 2011
Statut
Membre
Dernière intervention
27 janvier 2021
1
22 mars 2012 à 09:02
besoin d'aide svp
0
tito23
Messages postés
305
Date d'inscription
mardi 10 août 2010
Statut
Membre
Dernière intervention
16 janvier 2013
4
22 mars 2012 à 10:16
il faut intégrer le code js dans le head!
0
Debutant en webmastering
Messages postés
401
Date d'inscription
lundi 6 juin 2011
Statut
Membre
Dernière intervention
27 janvier 2021
1
22 mars 2012 à 10:56
je vais essayer cela de suite, merci pour l'indication
0
Debutant en webmastering
Messages postés
401
Date d'inscription
lundi 6 juin 2011
Statut
Membre
Dernière intervention
27 janvier 2021
1
22 mars 2012 à 11:13
non, aucun changement
0

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

Posez votre question
Evodia
Messages postés
2
Date d'inscription
lundi 14 octobre 2013
Statut
Membre
Dernière intervention
15 octobre 2013

14 oct. 2013 à 13:57
Bonjour,

J'ai utilisé le même carousel avec succès, mais j'aurais aimé que les images soient cliquables vers le lien d'une autre page du site. J'ai utilisé le code habituel pour faire le lien (a href ...), l'icône change au passage de la souris mais ensuite c'est comme s'il n'y avait pas de lien ... Vous avez une piste ? Est-ce que ça n'est pas envisageable avec ce script ? Merci d'avance pour vos lumières ...
0
Stéphane18
Messages postés
372
Date d'inscription
jeudi 3 mars 2011
Statut
Membre
Dernière intervention
20 février 2019
133
14 oct. 2013 à 18:42
Salut, je viens de faire un test avec un lien et cela fonctionne à merveille voici ce que j'ai fait:

<a href="ton lien">
<img class ="cloudcarousel" src="ton image" alt="test"/>
</a>
0
Evodia
Messages postés
2
Date d'inscription
lundi 14 octobre 2013
Statut
Membre
Dernière intervention
15 octobre 2013

15 oct. 2013 à 10:42
Merci

Je me suis repenchée sur mon code et là une faute de frappe m'a sauté aux yeux alors que je tournais en rond depuis des heures ... Comme quoi des fois on est trop la tête dedans ... Mais de savoir que le lien pouvait fonctionner m'a aidé à avancer donc merci encore !
0
Stéphane18
Messages postés
372
Date d'inscription
jeudi 3 mars 2011
Statut
Membre
Dernière intervention
20 février 2019
133
22 mars 2012 à 13:09
Salut, je viens de faire le test d'intégration de ce carousel et il fonctionne à merveille, j'ai simplement fait un copier/coller de leur exemple et changer le chemin d'accès aux images et au script sans oublier d'appeler la librairie jquery depuis les serveurs de google.

Fait attention au chemin d'accès au script et aux images c'est souvent une source d'angoisse.

Par exemple moi j'ai créé un dossier test dans ce dossier il y a un dossier images qui contient les images du carousel, un dossier js qui contient le script du carousel et ma page index.html qui contient le code ci-dessous:

<!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>test carrousel</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/JavaScript" src="js/cloud-carousel.1.0.5.js"></script>

<script>
$(document).ready(function(){
	$("#carousel1").CloudCarousel(		
		{			
			xPos: 128,
			yPos: 32,
			buttonLeft: $("#left-but"),
			buttonRight: $("#right-but"),
			altBox: $("#alt-text"),
			titleBox: $("#title-text")

		}
	);
}); 
</script>
</head>
<body>

<!-- This is the container for the carousel. -->
<div id = "carousel1" style="width:256px; height:128px;background:#000;overflow:scroll;">            
    <!-- All images with class of "cloudcarousel" will be turned into carousel items -->
    <!-- You can place links around these images -->
    <img class = "cloudcarousel" src="images/flag1.png" alt="Flag 1 Description" title="Flag 1 Title" />
    <img class = "cloudcarousel" src="images/flag2.png" alt="Flag 2 Description" title="Flag 2 Title" />
    <img class = "cloudcarousel" src="images/flag3.png" alt="Flag 3 Description" title="Flag 3 Title" />
    <img class = "cloudcarousel" src="images/flag4.png" alt="Flag 4 Description" title="Flag 4 Title" />
</div>

<!-- Define left and right buttons. -->
<input id="left-but" type="button" value="Left" />
<input id="right-but" type="button" value="Right" />


<!-- Define elements to accept the alt and title text from the images. -->
<p id="title-text"></p>
<p id="alt-text"></p>

</body>
</html>
-1
Debutant en webmastering
Messages postés
401
Date d'inscription
lundi 6 juin 2011
Statut
Membre
Dernière intervention
27 janvier 2021
1
Modifié par Debutant en webmastering le 22/03/2012 à 14:28
et bien tu as bien de la chance car moi j'obtiens seulement ceci
http://ioj.com/v/ryhzp

avec le code suivant :
<!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>test carrousel</title>



<script>
$(document).ready(function(){
$("#carousel1").CloudCarousel(
{
xPos: 128,
yPos: 32,
buttonLeft: $("#left-but"),
buttonRight: $("#right-but"),
altBox: $("#alt-text"),
titleBox: $("#title-text")

}
);
});
</script>
</head>
<body>

<!-- This is the container for the carousel. -->
<div id = "carousel1" style="width:2560px; height:1280px;background:#000;overflow:scroll;">
<!-- All images with class of "cloudcarousel" will be turned into carousel items -->
<!-- You can place links around these images -->
<img class = "cloudcarousel" src="images/affiches1.jpg" alt="Flag 1 Description" title="Flag 1 Title" />
<img class = "cloudcarousel" src="images/bloc1.jpg" alt="Flag 2 Description" title="Flag 2 Title" />
<img class = "cloudcarousel" src="images/brochure1.jpg" alt="Flag 3 Description" title="Flag 3 Title" />
<img class = "cloudcarousel" src="images/carte_commerciale1.jpg" alt="Flag 4 Description" title="Flag 4 Title" />
<img class = "cloudcarousel" src="images/carte_de_voeux1.jpg" alt="Flag 5 Description" title="Flag 5 Title" />
<img class = "cloudcarousel" src="images/carte_postale1.jpg" alt="Flag 6 Description" title="Flag 6 Title" />
<img class = "cloudcarousel" src="images/enveloppe1.jpg" alt="Flag 7 Description" title="Flag 7 Title" />
<img class = "cloudcarousel" src="images/etiquetteF.jpg" alt="Flag 8 Description" title="Flag 8 Title" />
<img class = "cloudcarousel" src="images/flyerF.jpg" alt="Flag 9 Description" title="Flag 9 Title" />
<img class = "cloudcarousel" src="images/liasseF.jpg" alt="Flag 10 Description" title="Flag 10 Title" />
<img class = "cloudcarousel" src="images/menuF.jpg" alt="Flag 11 Description" title="Flag 11 Title" />
<img class = "cloudcarousel" src="images/plaquetteF.jpg" alt="Flag 12 Description" title="Flag 12 Title" />
<img class = "cloudcarousel" src="images/prospectus1.jpg" alt="Flag 13 Description" title="Flag 13 Title" />
<img class = "cloudcarousel" src="images/tamponF.jpg" alt="Flag 14 Description" title="Flag 14 Title" />
<img class = "cloudcarousel" src="images/tdl1.jpg" alt="Flag 15 Description" title="Flag 15 Title" />
</div>

<!-- Define left and right buttons. -->
<input id="left-but" type="button" value="Left" />
<input id="right-but" type="button" value="Right" />


<!-- Define elements to accept the alt and title text from the images. -->
<p id="title-text"></p>
<p id="alt-text"></p>

</body>
</html>

et une arborescence du type
dossier => ---.js, images=> mes images
0
Stéphane18
Messages postés
372
Date d'inscription
jeudi 3 mars 2011
Statut
Membre
Dernière intervention
20 février 2019
133
22 mars 2012 à 14:33
Le lien que tu donne ne fonctionne pas je n'arrive pas à voir le résultat obtenu, de toute façon il y a obligatoirement une solution à ton problème !!
0
Debutant en webmastering
Messages postés
401
Date d'inscription
lundi 6 juin 2011
Statut
Membre
Dernière intervention
27 janvier 2021
1
22 mars 2012 à 14:45
j'ai modifié le lien dans mon message recharge la page et réessaie sinon au pire demande-moi je t'en refais un
0
Stéphane18
Messages postés
372
Date d'inscription
jeudi 3 mars 2011
Statut
Membre
Dernière intervention
20 février 2019
133
22 mars 2012 à 14:51
Ok c'est bon, alors premier test tape l'adresse ci-dessous dans la barre d'adresse de ton navigateur et dit moi ce que tu vois !

file:///C:/Users/Damien/Desktop/Carousel_js/js/cloud-carousel.1.0.5.js
0
Debutant en webmastering
Messages postés
401
Date d'inscription
lundi 6 juin 2011
Statut
Membre
Dernière intervention
27 janvier 2021
1
Modifié par Debutant en webmastering le 22/03/2012 à 14:59
je vois le js
0