Intégrer un carousel dans ma page html [Résolu/Fermé]

Signaler
Messages postés
401
Date d'inscription
lundi 6 juin 2011
Statut
Membre
Dernière intervention
27 janvier 2021
-
Messages postés
2
Date d'inscription
lundi 14 octobre 2013
Statut
Membre
Dernière intervention
15 octobre 2013
-
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

Messages postés
5695
Date d'inscription
lundi 16 janvier 2012
Statut
Contributeur
Dernière intervention
14 octobre 2020
1 076
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
Merci

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

CCM 63550 internautes nous ont dit merci ce mois-ci

Messages postés
401
Date d'inscription
lundi 6 juin 2011
Statut
Membre
Dernière intervention
27 janvier 2021
1
oui je l'avais aussi intégré
Messages postés
401
Date d'inscription
lundi 6 juin 2011
Statut
Membre
Dernière intervention
27 janvier 2021
1
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
Messages postés
401
Date d'inscription
lundi 6 juin 2011
Statut
Membre
Dernière intervention
27 janvier 2021
1
besoin d'aide svp
Messages postés
305
Date d'inscription
mardi 10 août 2010
Statut
Membre
Dernière intervention
16 janvier 2013
4
il faut intégrer le code js dans le head!
Messages postés
401
Date d'inscription
lundi 6 juin 2011
Statut
Membre
Dernière intervention
27 janvier 2021
1
je vais essayer cela de suite, merci pour l'indication
Messages postés
401
Date d'inscription
lundi 6 juin 2011
Statut
Membre
Dernière intervention
27 janvier 2021
1
non, aucun changement
Messages postés
2
Date d'inscription
lundi 14 octobre 2013
Statut
Membre
Dernière intervention
15 octobre 2013

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 ...
Messages postés
372
Date d'inscription
jeudi 3 mars 2011
Statut
Membre
Dernière intervention
20 février 2019
126
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>
Messages postés
2
Date d'inscription
lundi 14 octobre 2013
Statut
Membre
Dernière intervention
15 octobre 2013

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 !
Messages postés
372
Date d'inscription
jeudi 3 mars 2011
Statut
Membre
Dernière intervention
20 février 2019
126
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>
Messages postés
401
Date d'inscription
lundi 6 juin 2011
Statut
Membre
Dernière intervention
27 janvier 2021
1
ah exact je viens de voir les changements
PS : n'est-il pas possible de faire un défilement des images ??
(*ne connaît rien au js*)
Messages postés
372
Date d'inscription
jeudi 3 mars 2011
Statut
Membre
Dernière intervention
20 février 2019
126
Pour un défilement automatique il faut ajouter deux instructions en plus tous est indiqué sur la doc:

http://www.professorcloud.com/mainsite/carousel-integration.htm

<script>
$(document).ready(function(){
	$("#carousel1").CloudCarousel(		
		{			
			xPos: 128,
			yPos: 32,
			buttonLeft: $("#left-but"),
			buttonRight: $("#right-but"),
			altBox: $("#alt-text"),
			titleBox: $("#title-text")
                        autoRotate: ("left"),  <--direction de la rotation
			autoRotateDelay: 3500  <--délai en milliseconde entre chaque rotation

		}
	);
}); 
</script>
Messages postés
401
Date d'inscription
lundi 6 juin 2011
Statut
Membre
Dernière intervention
27 janvier 2021
1
merci, ça fonctionne, par contre j'ai un petit souci lorsque je tourne vers la droite, l'affichage du titre a du mal à charger, est-ce normal ?
Messages postés
372
Date d'inscription
jeudi 3 mars 2011
Statut
Membre
Dernière intervention
20 février 2019
126
Non, la je ne sais pas mais le plus dur est fait :)
Messages postés
401
Date d'inscription
lundi 6 juin 2011
Statut
Membre
Dernière intervention
27 janvier 2021
1
oui tu as raison, vraiment merci =)