Intégrer un carousel dans ma page html

Résolu
Debutant en webmastering Messages postés 401 Date d'inscription   Statut Membre Dernière intervention   -  
Evodia Messages postés 2 Date d'inscription   Statut Membre Dernière intervention   -
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

Réponse 1 / 8
AssassinTourist Messages postés 6029 Date d'inscription   Statut Contributeur Dernière intervention   1 312
 
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   Statut Membre Dernière intervention  
 
oui je l'avais aussi intégré
0
Debutant en webmastering Messages postés 401 Date d'inscription   Statut Membre Dernière intervention  
 
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   Statut Membre Dernière intervention  
 
besoin d'aide svp
0
Réponse 2 / 8
tito23 Messages postés 305 Date d'inscription   Statut Membre Dernière intervention   4
 
il faut intégrer le code js dans le head!
0
Réponse 3 / 8
Debutant en webmastering Messages postés 401 Date d'inscription   Statut Membre Dernière intervention  
 
je vais essayer cela de suite, merci pour l'indication
0
Réponse 4 / 8
Debutant en webmastering Messages postés 401 Date d'inscription   Statut Membre Dernière intervention  
 
non, aucun changement
0

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

Posez votre question
Réponse 5 / 8
Evodia Messages postés 2 Date d'inscription   Statut Membre Dernière intervention  
 
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
Réponse 6 / 8
Stéphane18 Messages postés 372 Date d'inscription   Statut Membre Dernière intervention   132
 
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
Réponse 7 / 8
Evodia Messages postés 2 Date d'inscription   Statut Membre Dernière intervention  
 
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
Réponse 8 / 8
Stéphane18 Messages postés 372 Date d'inscription   Statut Membre Dernière intervention   132
 
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   Statut Membre Dernière intervention  
 
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   Statut Membre Dernière intervention   132
 
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   Statut Membre Dernière intervention  
 
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   Statut Membre Dernière intervention   132
 
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   Statut Membre Dernière intervention  
 
je vois le js
0

Discussions similaires

Fond d'écran carousel xiaomi
Thomasg -
Albator -

3 réponses
la balise <br> ou <br />
faamugol -
rwaness -

8 réponses
Enlever les fond d'ecran carousel auto du tel XIAMI 14
Joo2795 -
MPMP10 -

1 réponse
<br> ou <br /> ou </br>
corentin.93 -
jessy006 -

11 réponses
Balise </br>
erf -
erf -

3 réponses