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>

A voir également:

8 réponses

Réponse 1 / 8

AssassinTourist Messages postés 5710 Date d'inscription lundi 16 janvier 2012 Statut Contributeur Dernière intervention 29 février 2024 1 312
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>

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 à 14:17

oui je l'avais aussi intégré

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 à 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

Debutant en webmastering Messages postés 401 Date d'inscription lundi 6 juin 2011 Statut Membre Dernière intervention 27 janvier 2021
22 mars 2012 à 09:02

besoin d'aide svp

Réponse 2 / 8

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!

Réponse 3 / 8

Debutant en webmastering Messages postés 401 Date d'inscription lundi 6 juin 2011 Statut Membre Dernière intervention 27 janvier 2021
22 mars 2012 à 10:56

je vais essayer cela de suite, merci pour l'indication

Réponse 4 / 8

Debutant en webmastering Messages postés 401 Date d'inscription lundi 6 juin 2011 Statut Membre Dernière intervention 27 janvier 2021
22 mars 2012 à 11:13

non, aucun changement

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 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 ...

Réponse 6 / 8

Stéphane18 Messages postés 372 Date d'inscription jeudi 3 mars 2011 Statut Membre Dernière intervention 20 février 2019 132
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>

Réponse 7 / 8

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 !

Réponse 8 / 8

Stéphane18 Messages postés 372 Date d'inscription jeudi 3 mars 2011 Statut Membre Dernière intervention 20 février 2019 132
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>

Debutant en webmastering Messages postés 401 Date d'inscription lundi 6 juin 2011 Statut Membre Dernière intervention 27 janvier 2021
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>


<div id = "carousel1" style="width:2560px; height:1280px;background:#000;overflow:scroll;">


<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>


<input id="left-but" type="button" value="Left" />
<input id="right-but" type="button" value="Right" />


<p id="title-text"></p>
<p id="alt-text"></p>

</body>
</html>

et une arborescence du type
dossier => ---.js, images=> mes images

Stéphane18 Messages postés 372 Date d'inscription jeudi 3 mars 2011 Statut Membre Dernière intervention 20 février 2019 132
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 !!

Debutant en webmastering Messages postés 401 Date d'inscription lundi 6 juin 2011 Statut Membre Dernière intervention 27 janvier 2021
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

Stéphane18 Messages postés 372 Date d'inscription jeudi 3 mars 2011 Statut Membre Dernière intervention 20 février 2019 132
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

Debutant en webmastering Messages postés 401 Date d'inscription lundi 6 juin 2011 Statut Membre Dernière intervention 27 janvier 2021
Modifié par Debutant en webmastering le 22/03/2012 à 14:59

je vois le js

Discussions similaires

Fond d'écran à mon carousel

la balise <br> ou <br />

Saut de lignes sans <br/>

Balise </br>