Utilisation de jcarousel

**keybon** · 25/03/2013, 20h25

Bonjour, j'ai essaye par tous les moyens de faire fonctionner le plugin jcarousel de jquery.

ici les infos : http://sorgalla.com/projects/jcarousel/#Examples

donc voici mon code :
1. dans le header:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
<script type="text/javascript" src="scripts/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="scripts/jsor-jcarousel-7bb2e0a/lib/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="scripts/jsor-jcarousel-7bb2e0a/lib/jquery.jcarousel.min.js"></script>
<link rel="stylesheet" type="text/css" href="scripts/jsor-jcarousel-7bb2e0a/style.css" />

2. dans la page php qui contient le jcarousel :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<div id="wrap">
 
  <ul id="mycarousel" class="jcarousel-skin-tango">
    <li><img src="http://clients.123properties.com/Media/Media/c2d0deb6-977d-43ec-9d1a-07945c8cfe4c.JPG" alt="slider image" style="width: 90px; height:64px;"/></li>
<li><img src="c2d0deb6-977d-43ec-9d1a-07945c8cfe4c.JPG" alt="slider image" style="width: 90px; height:64px;"/></li>
<li><img src="c2d0deb6-977d-43ec-9d1a-07945c8cfe4c.JPG" alt="slider image" style="width: 90px; height:64px;"/></li>
<li><img src="c2d0deb6-977d-43ec-9d1a-07945c8cfe4c.JPG" alt="slider image" style="width: 90px; height:64px;"/></li>
<li><img src="c2d0deb6-977d-43ec-9d1a-07945c8cfe4c.JPG" alt="slider image" style="width: 90px; height:64px;"/></li>
<li><img src="c2d0deb6-977d-43ec-9d1a-07945c8cfe4c.JPG" alt="slider image" style="width: 90px; height:64px;"/></li>
</ul>
</div>
<a class="carousel-control left" href="#unitListDetail" data-slide="prev">&lsaquo;</a>
<a class="carousel-control right" href="#unitListDetail" data-slide="next">&rsaquo;</a>	
<script type="text/javascript">
jQuery(document).ready(function() {
    jQuery('#mycarousel').jcarousel({
        scroll: 2
    });
});
</script>

mais voila, ca ne fait que m'afficher les images l'une a cote de l'autre, et les fleches..

je ne comprends pas pourquoi, j'ai même essayer de remplacer les liens du header par :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<link rel="stylesheet" href="http://sorgalla.com/projects/jcarousel/style.css" rel="stylesheet" type="text/css" />
<!--
  jQuery library
-->
<script type="text/javascript" src="http://sorgalla.com/projects/jcarousel/lib/jquery-1.2.1.pack.js"></script>
<!--
  jCarousel library
-->
<script type="text/javascript" src="http://sorgalla.com/projects/jcarousel/lib/jquery.jcarousel.pack.js"></script>
<!--
  jCarousel core stylesheet
-->
<link rel="stylesheet" type="text/css" href="http://sorgalla.com/projects/jcarousel/lib/jquery.jcarousel.css" />
<!--
  jCarousel skin stylesheet
-->
<link rel="stylesheet" type="text/css" href="http://sorgalla.com/projects/jcarousel/skins/tango/skin.css" />

mais rien n'y fait. j'ai vraiment du mal avec certains plugins jquery, et ça me ferait vraiment plaisir si vous pouviez m'apportiez un peu d'aide

**Lorenzo77** · 25/03/2013, 22h03

salut,

dans le 1er il et manque le skin !

et dans le 2 tu ne dois pas avoir les bonnes versions ni meme les bonnes lib car quand je teste tout fonctionne, ex :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-us">
<head>
<title>jCarousel Examples</title>
<link href="http://sorgalla.com/projects/jcarousel/style.css" rel="stylesheet" type="text/css" />
<!--
  jQuery library
-->
<script type="text/javascript" src="http://sorgalla.com/projects/jcarousel/lib/jquery-1.4.2.min.js"></script>
<!--
  jCarousel library
-->
<script type="text/javascript" src="http://sorgalla.com/projects/jcarousel/lib/jquery.jcarousel.min.js"></script>
<!--
  jCarousel skin stylesheet
-->
<link rel="stylesheet" type="text/css" href="http://sorgalla.com/projects/jcarousel/skins/tango/skin.css" />
 
<script type="text/javascript">
 
jQuery(document).ready(function() {
    jQuery('#mycarousel').jcarousel();
});
 
</script>
 
</head>
<body>
<div id="wrap">
  <h1>jCarousel</h1>
  <h2>Riding carousels with jQuery</h2>
 
  <h3>Simple carousel</h3>
  <p>
    This is the most simple usage of the carousel with no configuration options.
  </p>
 
  <ul id="mycarousel" class="jcarousel-skin-tango">
    <li><img src="http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/75/199481072_b4a0d09597_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/57/199481087_33ae73a8de_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/77/199481108_4359e6b971_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/58/199481143_3c148d9dd3_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/72/199481203_ad4cdcf109_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/58/199481218_264ce20da0_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/69/199481255_fdfe885f87_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/60/199480111_87d4cb3e38_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/70/229228324_08223b70fa_s.jpg" width="75" height="75" alt="" /></li>
  </ul>
 
</div>
</body>
</html>

Utilisation de jcarousel

jQuery

Vue hybride

Discussions similaires

Partager

Partager