Carousel

Sujet résolu

Yourgod2000

14 juin 2010 à 11:53:40

Bonjour, j'ai découvert le carousel du jQuery et je voudrais le mettre en place seulement partout où j'ai cherché je n'ai trouvé aucune explication clair, d'un site à l'autre le lien de téléchargement du carousel ne me fourni pas les mêmes fichier JS j'ai trouvé des jquery.jcarousel.js, des jquery.jcarousel.pack.js, etc bref si quelqu'un à réussi à l'installer qu'il me fasse signe, quels <script type="text/javascript" src=""></script> dois-je mettre? comment appelle t-on la fonction jcarousel, etc.
Merci.

Ptt-homme

14 juin 2010 à 12:11:40

SAlut, genre un truc dans le genre où tu as juste à suivre les étapes, t'y arrives pas?

ICI

Yourgod2000

14 juin 2010 à 13:19:18

Je suis déjà allé là mais j'arrive pas à comprendre même si c'est bien présenté ça parle de plein de choses et d'autre sans expliquer comment on utilise le jcarousel.

<script type="text/javascript" src="/path/to/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="/path/to/lib/jquery.jcarousel.min.js"></script>
<link rel="stylesheet" type="text/css" href="/path/to/skin/skin.css" />

c'est bien indiqué puis on nous dit apparemment d'insérer:

<script type="text/javascript">
jQuery(document).ready(function() {
    jQuery('#mycarousel').jcarousel({
        // Configuration goes here
    });
});
</script>

mais ensuite je ne vois pas du tout comment ça fonctionne...

youne25

14 juin 2010 à 14:01:38

salut
voici un tutoriel video qui te permettra d'y voir plus claire:
http://www.grafikart.fr/tutoriels/carrousel-javascript-87

deux choses sont infinies: l'univers et la bêtise humaine. Mais en ce qui concerne l'univers, je n'en ai pas encore acquis la certitude absolue. A.E

Yourgod2000

14 juin 2010 à 22:09:17

Woaow....c'est plus compliqué que je ne le pensais...

Ptt-homme

15 juin 2010 à 10:21:11

Citation : Yourgod2000

Woaow....c'est plus compliqué que je ne le pensais...

Re, je t'ai fais grosso modo la mise en place du carrousel:

En un: tu télécharges le carrousel et tu le décompresses.
En deux, tu récupères dans le dossier que tu viens d'obtenir le css ainsi que les images de ton choix entre ie7 ou jango que tu places dans un répertoire style par exemple à la racine de ton site.

En trois, tu récupères les fichiers js contenus dans le dossier lib du répertoire décompressé, que tu copies dans le dossier js par exemple toujours à la racine de ton site.

En quatre, tu créés un répertoire pour accueillir tes images, moi il s'appelle img, vachement original hein!

Tu devrais avoir un truc dans le genre:

Ensuite, il te reste à mettre en place le html:

<!DOCTYPE html>
<html>
	<head>
		<title>Test d'un carroussel pour Yourgod2000 - SDZ</title>
		<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
		<script type="text/javascript" src="js/jquery.jcarousel.min.js"></script>
		<link rel="stylesheet" type="text/css" href="style/skin.css" /></script>
		<script type="text/javascript">
			$(document).ready(function() {
				$('#mycarousel').jcarousel();
			});
		</script>
	</head>
	<body>
		<ul id="mycarousel" class="jcarousel-skin-tango">
			<li><img src="img/Koala.jpg" width="75" height="75" alt="" /></li>
			<li><img src="img/Koala.jpg" width="75" height="75" alt="" /></li>
			<li><img src="img/Koala.jpg" width="75" height="75" alt="" /></li>
			<li><img src="img/Koala.jpg" width="75" height="75" alt="" /></li>
			<li><img src="img/Koala.jpg" width="75" height="75" alt="" /></li>
			<li><img src="img/Koala.jpg" width="75" height="75" alt="" /></li>
		</ul>
	<body>
</html>

Il faut bien que tu gardes à l'esprit que le plus important c'est l'id de l'ul mycarousel ainsi que sa classe jcarousel-skin-tango.

<ul id="mycarousel" class="jcarousel-skin-tango">

Tu obtiens:

Perso, je peux pas mieux expliquer

Yourgod2000

16 juin 2010 à 11:51:19

Voilà pour ma part le code que j'ai fait grâce à ton explication:

<script type="text/javascript" src="jCarousel/lib/jquery.jcarousel.js"></script>
	<script type="text/javascript" src="jCarousel/lib/jquery-1.4.2.min.js"></script>
	<script type="text/javascript" src="jCarousel/lib/jquery.jcarousel.min.js"></script>
	<script type="text/javascript" src="style/skin.css"></script>
	<script type="text/javascript">
		$(document).ready(function() {
			$('#mycarousel').jcarousel();
		});
	</script>
</head>
<body>
        <ul id="mycarousel" class="jcarousel-skin-ie7">
		<li><img src="images/photos/Repete_1.jpg" width="75" height="75" alt="" /></li>
                <li><img src="images/photos/Repete_2.jpg" width="75" height="75" alt="" /></li>
	</ul>
</body>

Seulement ça ne m'affiche que 2 images collé l'une à côté de l'autre et quand je rafraichit ma page ça m'explique que je n'ai pas défini de largeur ou de hauteur pour mes items et que ça va faire une boucle infinie...

Ptt-homme

16 juin 2010 à 12:10:41

Salut moi j'arrive à produire ce problème quand j'ai pas la class de l'ul définie!

<ul id="mycarousel" class="jcarousel-skin-tango">

Il faut que tu vérifies que tu as bien collé le CSS de la bonne classe dans ton dossier style et normalement cela ne pose pas de problème!

Les deux classes possibles sont:

class="jcarousel-skin-tango"
class="jcarousel-skin-ie7"

Edit il y a d'autre classe à condition d'avoir télécharger les thèmes, hein pour ne pas être trop affirmatif

Yourgod2000

16 juin 2010 à 18:55:23

Ok ok, mon carousel s'affiche maintenant, je vais ensuite essayer de comprendre comment ça marche pour faire mon propre carousel, merci en tout cas.

Ptt-homme

16 juin 2010 à 19:34:29

Si ton problème est résolu n'oublies pas de le mentionner^^

Carousel

× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.

× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.

Carousel

Carousel

Supprimer

Modérer

Signaler le message aux modérateurs