Bonjour à tous !

J'ai récupéré un slider diaporama généré via le soft CSS Slider car il contenait plusieurs effets que je souhaitais utiliser sur mon site, puis je l'ai adapté pour qu'il aie une disposition différente à l'intérieur d'un menu déroulant ; en effet plutôt que de rassembler les fonctionnalités du menu dans la même Div, je les ai séparées en 3 (boutons de navigation, infos, et grande image) comme ceci

Nom : forum.png Affichages : 138 Taille : 1,07 Mo

Le problème est que maintenant les liens ne fonctionnent plus ! Je ne m'y connaît pas trop dans ce que j'ai pu voir du html/css spécifique au slider, et j'essaye tant bien que mal de faire refonctionner le changement d'image lorsqu'on clique sur une bulle de navigation et l'actualisation du texte d'info.

Je vous donne le code html du menu tel qu'exporté de CSS Slider :

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
<div class='csslider1 no-autoplay '>
	<input name="cs_anchor1" id='cs_slide1_0' type="radio" class='cs_anchor slide' checked>
	<input name="cs_anchor1" id='cs_slide1_1' type="radio" class='cs_anchor slide' >
	<input name="cs_anchor1" id='cs_slide1_2' type="radio" class='cs_anchor slide' >
	<input name="cs_anchor1" id='cs_slide1_3' type="radio" class='cs_anchor slide' >
	<input name="cs_anchor1" id='cs_slide1_4' type="radio" class='cs_anchor slide' >
	<ul>
		<li class="cs_skeleton"><img src="cssslider_files/csss_images1/a1.jpg" style="width: 100%;"></li>
		<li class='num0 img slide'> <img src='cssslider_files/csss_images1/a1.jpg' alt='a1' title='a1' /></li>
		<li class='num1 img slide'> <img src='cssslider_files/csss_images1/a2.jpg' alt='a2' title='a2' /></li>
		<li class='num2 img slide'> <img src='cssslider_files/csss_images1/a3.jpg' alt='a3' title='a3' /></li>
		<li class='num3 img slide'> <img src='cssslider_files/csss_images1/a4.jpg' alt='a4' title='a4' /></li>
		<li class='num4 img slide'> <img src='cssslider_files/csss_images1/a5.jpg' alt='a5' title='a5' /></li>
	</ul><div class="cs_engine"><a href="http://cssslider.com">slideshow in html</a> by cssSlider.com v2.0</div>
	<div class='cs_description'>
		<label class='num0'><span class="cs_title"><span class="cs_wrapper">a1</span></span></label>
		<label class='num1'><span class="cs_title"><span class="cs_wrapper">a2</span></span></label>
		<label class='num2'><span class="cs_title"><span class="cs_wrapper">a3</span></span></label>
		<label class='num3'><span class="cs_title"><span class="cs_wrapper">a4</span></span></label>
		<label class='num4'><span class="cs_title"><span class="cs_wrapper">a5</span></span></label>
	</div>
	<div class='cs_bullets'>
		<label class='num0' for='cs_slide1_0'> <span class='cs_point'></span>
		<span class='cs_thumb'><img src='cssslider_files/csss_tooltips1/a1.jpg' alt='a1' title='a1' /></span></label>
		<label class='num1' for='cs_slide1_1'> <span class='cs_point'></span>
		<span class='cs_thumb'><img src='cssslider_files/csss_tooltips1/a2.jpg' alt='a2' title='a2' /></span></label>
		<label class='num2' for='cs_slide1_2'> <span class='cs_point'></span>
		<span class='cs_thumb'><img src='cssslider_files/csss_tooltips1/a3.jpg' alt='a3' title='a3' /></span></label>
		<label class='num3' for='cs_slide1_3'> <span class='cs_point'></span>
		<span class='cs_thumb'><img src='cssslider_files/csss_tooltips1/a4.jpg' alt='a4' title='a4' /></span></label>
		<label class='num4' for='cs_slide1_4'> <span class='cs_point'></span>
		<span class='cs_thumb'><img src='cssslider_files/csss_tooltips1/a5.jpg' alt='a5' title='a5' /></span></label>
	</div>
</div>

Et le code réadapté pour mon site (comme sur l'image) :

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
<div id="diaporama">
	<div class='csslider1 no-autoplay '>
		<input name="cs_anchor1" id='cs_slide1_0' type="radio" class='cs_anchor slide' checked>
		<input name="cs_anchor1" id='cs_slide1_1' type="radio" class='cs_anchor slide' >
		<input name="cs_anchor1" id='cs_slide1_2' type="radio" class='cs_anchor slide' >
		<input name="cs_anchor1" id='cs_slide1_3' type="radio" class='cs_anchor slide' >
		<input name="cs_anchor1" id='cs_slide1_4' type="radio" class='cs_anchor slide' >
		<div class='cs_bullets'>
			<label class='num0' for='cs_slide1_0'> <span class='cs_point'></span>
				<span class='cs_thumb'><img src='./Parallaxjs_files/images/thumbnails/a1.jpg' alt='a1' title='a1' /></span></label>
			<label class='num1' for='cs_slide1_1'> <span class='cs_point'></span>
				<span class='cs_thumb'><img src='./Parallaxjs_files/images/thumbnails/a2.jpg' alt='a2' title='a2' /></span></label>
			<label class='num2' for='cs_slide1_2'> <span class='cs_point'></span>
				<span class='cs_thumb'><img src='./Parallaxjs_files/images/thumbnails/a3.jpg' alt='a3' title='a3' /></span></label>
			<label class='num3' for='cs_slide1_3'> <span class='cs_point'></span>
				<span class='cs_thumb'><img src='./Parallaxjs_files/images/thumbnails/a4.jpg' alt='a4' title='a4' /></span></label>
	</div></div></div>
	<div id="infos" class='cs_description'>
		<label class='num0'><span class="cs_title"><span class="cs_wrapper">a1</span></span></label>
		<label class='num1'><span class="cs_title"><span class="cs_wrapper">a2</span></span></label>
		<label class='num2'><span class="cs_title"><span class="cs_wrapper">a3</span></span></label>
		<label class='num3'><span class="cs_title"><span class="cs_wrapper">a4</span></span></label>
		<label class='num4'><span class="cs_title"><span class="cs_wrapper">a5</span></span></label>
	</div>
	<div id="grandeimage" class="cs_skeleton">
		<ul>
			<li class="cs_skeleton">	<img src="./Parallaxjs_files/images/a1.jpg" style="width: 100%;"></li>
			<li class='num0 img slide'> <img src='./Parallaxjs_files/images/a1.jpg' alt='a1' title='a1' /></li>
			<li class='num1 img slide'> <img src='./Parallaxjs_files/images/a2.jpg' alt='a2' title='a2' /></li>
			<li class='num2 img slide'> <img src='./Parallaxjs_files/images/a3.jpg' alt='a3' title='a3' /></li>
			<li class='num3 img slide'> <img src='./Parallaxjs_files/images/a4.jpg' alt='a4' title='a4' /></li>
			<li class='num4 img slide'> <img src='./Parallaxjs_files/images/a5.jpg' alt='a5' title='a5' /></li>
		</ul>
	</div>

J'ai du mal avec les label et la façon dont les images/textes sont appelées pour apparaître quand on clique sur une bulle du diapo. L'affichage des miniatures lorsqu'on hover une bulle fonctionne.