intégration de Step Carousel Viewer

Bonjour,

Je tente d'intégrer Step Carousel Viewer à mon site sur cette page :

J'ai 6 images, mais le caroussel se comporte comme s'il y en avait 7 !
A chaque fois, quelque soit le nombre d'images, je me retrouve avec un espace vide de la taille d'une image à la fin du défilement.

Merci pour votre aide !

Carousel Viewer :
http://www.dynamicdrive.com/dynamici...epcarousel.htm

pour le css :

Code:

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
.stepcarousel{
position: relative; /*leave this value alone*/
border: 0px;
overflow: scroll; /*leave this value alone*/
margin-left:24px;
width: 852px; /*Width of Carousel Viewer itself*/
height: 140px; /*Height should enough to fit largest content's height*/
}
 
.stepcarousel .belt{
 
position: absolute; /*leave this value alone*/
left: 0;
top: 0;
}
 
.stepcarousel .panel{
float: left; /*leave this value alone*/
overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
margin: 0px 20px 0px 0px; /*margin around each panel*/
width: 198px; /*Width of each panel holding each content. If removed, widths should be individually defined on each content DIV then. */
}
 
#mygallery{overflow: hidden;}
 
#mygallery{overflow: hidden;}

pour le javascript :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script type="text/javascript" src="/templates/rhuk_milkyway/js/stepcarousel.js">
<script type="text/javascript">
stepcarousel.setup({
	galleryid: 'mygallery', //id of carousel DIV
	beltclass: 'belt', //class of inner "belt" DIV containing all the panel DIVs
	panelclass: 'panel', //class of panel DIVs each holding content
	autostep: {enable:true, moveby:1, pause:3000},
	panelbehavior: {speed:500, wraparound:false, persist:false},
	defaultbuttons: {enable: true, moveby: 1, leftnav: ['/templates/rhuk_milkyway/images/gauche.png', -22, 52], rightnav: ['/templates/rhuk_milkyway/images/droite.png', 4, 52]},
	statusvars: ['statusA', 'statusB', 'statusC'], //register 3 variables that contain current panel (start), current panel (last), and total panels
	contenttype: ['inline'] //content setting ['inline'] or ['ajax', 'path_to_external_file']
})
 
</script>

pour le html :

Code:

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
div id="mygallery" class="stepcarousel">
<div class="belt">
 
<div class="panel">
<img src="/templates/rhuk_milkyway/images/accueil/01.jpg"/>
</div>
 
<div class="panel">
<img src="/templates/rhuk_milkyway/images/accueil/02.jpg"/>
</div>
 
<div class="panel">
<img src="/templates/rhuk_milkyway/images/accueil/03.jpg"/>
</div>
 
<div class="panel">
<img src="/templates/rhuk_milkyway/images/accueil/04.jpg"/>
</div>
 
<div class="panel">
<img src="/templates/rhuk_milkyway/images/accueil/05.jpg"/>
</div>
 
<div class="panel">
<img src="/templates/rhuk_milkyway/images/accueil/06.jpg"/>
</div>
 
</div>

intégration de Step Carousel Viewer - partiellement résolu