Placement dans le carousel

Bonjour,

J'ai un petit problème pour le placement des vignette de mon carousel
mes vignettes se déplace 5 par 5 quand on clique sur le chevron

quand on arrive sur la carrousel c'est bien placer:

Pièce jointe 163904

mais quand je clique sur le chevron sa donne ceci:

Pièce jointe 163903

j'aimerais donc régler ce problème mais je ne trouve pas la solution

code 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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<div class="navigation" id="navigation">
    <div class="carousel carousel-navigation" id="navcar">
        <ul>
            <li><img src="images/vignette_Paris_Region_Entreprises.png" width="97" height="49" 
              alt="17 septembre 2014/FINANCEMENT/Paris Région Entreprises soutient le projet Orséry
              Paris Région Entreprises accompagne financièrement le projet Orséry en lui accordant une Aide à l’Innovation Responsable (AIR) sous forme de subvention.
		Ce soutien va permettre à Orséry d’accélérer son programme de recherche et développement pour continuer à limiter toujours plus, les nuisances liées à la fabrication, distribution de livres dans une vision de développement durable." name="nav_item" id="0" ><span style="color:#ffffff;font-size: 10px;font-weight: bold;">Paris R&eacute;́gion</br> Entreprises</span></li><!-- 115  -->
              <li><img src="images/vignette_Direction_generale_des_Finances_statut_JEI.png" width="97" height="49" 
                alt="15 juillet 2014/CERTIFICATION JEI/La Direction Générale des Finances Publiques attribue le statut de JEI à Orséry.
                Dans le cadre d’un rescrit fiscal, la Direction Générale des Finances Publiques donne un avis favorable quant à l’éligibilité de la société Orséry à la qualification de Jeune Entreprise Innovante (JEI). 
		Orséry bénéficie donc des avantages liés à la qualification de JEI." name="nav_item" id="1"><span style="color:#ffffff;font-size: 10px;font-weight: bold;">Direction g&eacute;n&eacute;rale </br>des Finances</span></li>
              <li><img src="images/vignette_Mercure_HEC_Booster.png" width="97" height="49"  
                alt="10 juillet 2014/ACCOMPAGNEMENT/Orséry est finaliste du Mercure HEC Booster 2015.
                Orséry bénéficie pendant 6 mois (de Juillet à décembre 2014) d’ateliers sur la création d’entreprise, de l’expérience des anciens HEC grâce à leur coaching et à la force du réseau HEC. 
		Ce prix nous permet ainsi qu’aux 8 autres finalistes d’affiner notre stratégie de développement, d’identifier les meilleurs segments de marché à traiter en priorité. 
		C’est un excellent «*coup d’accélérateur*» *pour notre projet ambitieux et d’envergure." name="nav_item" id="2"><span style="color:#ffffff;font-size: 10px;font-weight: bold;">Mercure HEC </br>Booster</span></li>
              <li><img src="images/vignette_scientipole_croissance.png" width="97" height="49" 
                alt="9 juillet 2014/ACCOMPAGNEMENT/Orséry intègre Scientipôle Croissance.
                En intégrant la communauté Scientipôle Croissance, Orsery va pouvoir bénéficier de l’appui du réseau de plus de cinquante experts, scientifiques, managers ou financiers confirmés toujours en activité ou ex- dirigeants de PME et de grands groupes.
		Leur vocation est de répondre au besoin d’accompagnement des entrepreneurs, de favoriser leur autonomie, de construire dans la durée une relation de confiance. Ils disposent de compétences reconnues en matière de marketing, de commercial, de gestion de projet, de ressources humaines, de droit des affaires..." name="nav_item" id="3"><span style="color:#ffffff;font-size: 10px;font-weight: bold;">scientip&ocirc;̂le</br> croissance</span></li>
              <li><img src="images/vignette_scientipole_initiative.png" width="97" height="49"  
                alt="6 mai 2014/FINANCEMENT/Scientipôle initiative soutient le projet Orséry.
                Orséry a été élu lauréat de Scientipôle Initiative.
		Ce titre décerné par un jury d’entrepreneurs intervenant dans l’innovation, reconnait la pertinence et la viabilité du projet d’Orséry.
		Cela permet également à Orséry de pouvoir bénéficier de prêts d’honneur alloués par la Région Ile de France pour financer son développement." name="nav_item" id="4"><span style="color:#ffffff;font-size: 10px;font-weight: bold;">Scientip&ocirc;le</br> initiative</span></li>		
              <li><img src="images/vignette_BPI_France_FCPI.png" width="97" height="49"  
                alt="15 avril 2014/CERTIFICATION FCPI/BPI France qualifie Orséry d’ «*Entreprise Innovante*»
                BPI France a décidé d’attribuer la qualification d’**«*Entreprise Innovante*» à la société Orséry.
		Cette qualification permet aux Fonds Communs de Placement dans l’Innovation (FCPI) de pouvoir comptabiliser son éventuelle participation dans le capital d’Orséry dans la part obligatoire de son investissement dans les entreprises innovantes." name="nav_item" id="5"><span style="color:#ffffff;font-size: 10px;font-weight: bold;">BPI France </br>FCPI</span></li> 
              <li><img src="images/vignette_BPI_France_AIMA.png" width="97" height="49"  
                alt="15 avril 2014/FINANCEMENT/BPI France soutient le projet Orséry.
                BPI France a décidé de soutenir une partie de la recherche et développement nécessaire à la concrétisation du projet en allouant une subvention à la société Orséry.
		Orséry peut donc bénéficier du dispositif d’AIde à la MAturation de projets Innovants (AIMA) cofinancé par la région ile de France." name="nav_item" id="6"><span style="color:#ffffff;font-size: 10px;font-weight: bold;">BPI France </br> AIMA</span></li>	
              <li><img src="images/vignette _DRAC_Ile_de_France.png" width="97" height="49" 
                alt="14 avril 2014/FINANCEMENT/ La DRAC Ile-de-France soutient le projet Orséry.
                La Direction Régionale des Affaires Culturelles d’Ile de France est spécialisée dans le développement des structures publiques / privées de diffusion du livre et dans les actions de modernisation des librairies et maison d’édition indépendantes.
		Elle a décidé d’accorder une subvention à notre société.
		Elle a ainsi reconnu la pertinence de notre modèle innovant qui apporte une solution globale aux problématiques des différents acteurs de la filière du livre." name="nav_item" id="7" ><span style="color:#ffffff;font-size: 10px;font-weight: bold;">DRAC Ile</br> de France</span></li>	
          </ul>
	<a href="#" class="prev prev-navigation" ><span><img src="images/left.png" style="padding-top: 27px;margin-right: 71%;"width='auto' /></span> </a>
        <a href="#" class="next next-navigation"><span><img src="images/right.png" style="padding-left: 40%; padding-top: 30px;" width='auto'/></span> </a>
    </div>

code 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
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
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
.connected-carousels .stage {
    width: 620px;
    margin:0px auto;
    position: relative;
    border: 1px solid #404141;
}
 
.connected-carousels .photo-credits {
    position: absolute;
    right: 15px;
    bottom: 0;
    font-size: 13px;
    color: #fff;
    text-shadow: 0 0 1px rgba(0, 0, 0, 0.85);
    opacity: .66;
}
 
.connected-carousels .photo-credits a {
    color: #fff;
}
 
 
.connected-carousels .navigation {
    width: 620px;
    margin: -5px auto;
    position: relative;
}
 
 
.connected-carousels .carousel {
    overflow: hidden;
    position: relative;
 
 
}
 
.connected-carousels .carousel ul {
    width: 20000em;
    position: relative;
    list-style: none;
    margin: 0;
    padding: 0;
}
 
.connected-carousels .carousel li {
    float: left;
 
}
 
/** Stage carousel specific styles **/
/*
.connected-carousels .carousel-stage {
    height: 330px;
	width : 656px;
    -webkit-border-radius: 5px;
       -moz-border-radius: 5px;
            border-radius: 5px;
    -webkit-box-shadow: 0 0 2px #999;
       -moz-box-shadow: 0 0 2px #999;
            box-shadow: 0 0 2px #999;
}
*/
/** Navigation carousel specific styles **/
 
.connected-carousels .carousel-navigation {
    height: 98px;
    width: 622px;
 text-align:center;
    background: #fff;
    background-color: #404141;
    margin-left: -1px;
 
}
 
 
.connected-carousels .carousel-navigation li {
    cursor: pointer;
		margin-left: 23px;
		font-size: 13px;
		font-size-adjust: 0.5;
}
 
.connected-carousels .carousel-navigation li img {
    display: block;
	margin-top: 5px;
 
}
 
.connected-carousels .carousel-navigation li.active img {
    border-color: #ccc;
}
 
/** Stage carousel controls **/
 
.connected-carousels .prev-stage,
.connected-carousels .next-stage {
    display: block;
    position: absolute;
    top: 0;
    width: 325px;
    height: 330px;
    color: #fff;
}
 
.connected-carousels .prev-stage {
    left: 0;
}
 
.connected-carousels .next-stage {
    right: 0;
}
 
.connected-carousels .prev-stage.inactive,
.connected-carousels .next-stage.inactive {
    /*display: none;*/
}
 
.connected-carousels .prev-stage span,
.connected-carousels .next-stage span 
{
    display: none;
    position: absolute;
    top: 45%;
 
	font-size: 50px;
 
    text-align: center;
    color: #fff;
    text-decoration: none;
    text-shadow: 0 0 1px #000;
 
 
}
 
.connected-carousels .prev-stage span {
 
}
 
.connected-carousels .next-stage span {
 
}
 
.connected-carousels :hover span {
    display: initial;
}
 
 
.connected-carousels .prev-navigation,
.connected-carousels .next-navigation {
    display: block;
    position: absolute;
    color: #fff;
	font-size: 30px;
	width:80px;
    text-decoration: none;
    text-shadow: 0 0 1px #000;
 
}
 
.connected-carousels .prev-navigation {
    left: 0px;
    top: 0px;
 
    text-indent: 6px;
}
 
.connected-carousels .next-navigation {
    right: 0px;
    top: 0px;
    text-indent: 20px;
}
 
.connected-carousels .prev-navigation.inactive,
.connected-carousels .next-navigation.inactive {
    opacity: .5;
    cursor: default;
}
 
 
 
 
 
/************Changes by sandeep**********************/
 
@media screen and (max-width: 667px) {
.slideimg{
    width: 450px;
    height: 200px;
    padding: 2px;
}
 
 .connected-carousels .stage{
        width: 452px;
        height: 205px;
    }
 
}
 
@media screen and (max-width: 480px) {
    .slideimg{
    width: 348px;   
}
 
    .connected-carousels .stage{
        width: 350px;     
    }
}
 
@media screen and (max-width: 351px) {
    .slideimg{
    width: 313px;   
}
 
    .connected-carousels .stage{
        width: 320px;
    }
}
 
@media screen and (max-width: 320px) {
        .slideimg{
    width: 238px;   
}
 
    .connected-carousels .stage{
        width: 240px;
    }
}

Merci pour vos réponses