Bonjour,
Je ne sais pas si je post au bon endroit, mon slider utilise php/html et css...
Je souhaiterai créer un slider qui défile automatiquement, le "problème" c'est que je souhaites que les données du slide soit des éléments de ma base de donnée (texte uniquement). J'ai donc récupérer un code de slide en html/css basique pour faire un essai. En revanche, lorsque je remplace les images du slider par les éléments de ma base de données, je me retrouve avec mes deux textes qui défilent l'un en dessous de l'autre, en même temps, et pas l'un après l'autre dans un slide chacun...

Voilà mon code html :
Code : 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
 
<html>
<head>
<link rel="stylesheet" type="text/css" href="test.css" />
</head>
<?php //test blog.php
 
try {
	$bdd = new PDO('mysql:host=localhost;dbname=lesavis;charset=utf8', 'mariecrestey', 'root');
	$bdd->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
}
catch (Exception $e)
{
        die('Erreur : ' . $e->getMessage());
}
 
 
$reponse=$bdd->query('SELECT * FROM avis');
?>
<h1>Ce qu'ils en disent</h1>
 
<?php
while ($donnees = $reponse->fetch())
{
?>		
<body>
 
<div id="cssSlider">
  <div id="sliderImages">
		<p id="si_1"><?php echo $donnees['texte']."-".$donnees['nom_prenom']." - " .$donnees['fonction']." - " .$donnees['entreprise']; ?> </p>
 
		<div style="clear:left;"></div>
	</div>
</div>
 
 
 
<?php
}
 
$reponse->closeCursor(); // Termine le traitement de la requête
 
?>
 
</body>
</html>
et le code CSS :
Code : 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
@charset "UTF-8";
/* CSS Document */
 
#cssSlider {
  width: 1200px;
	height: 300px;
	overflow: hidden;
	border: 10px solid #666;
}
 
#sliderImages {
	width : 4000px;
	height: 300px;
	overflow: hidden;
 
	/* animation duration: 16s : 5x ~3s display image + 5x ~0.2s slide */
	animation: slide 16s infinite;
	-moz-animation: slide 16s infinite;
	-webkit-animation: slide 16s infinite;
	-o-animation: slide 16s infinite;
}
 
#sliderImages img {
	float: left;
}
 
#si_1{
	text-align:justify;
}
Je débute en php/mysql donc s'il y a un moyen plus simple de faire ce que je souhaite, n'hésitez pas à me l'indiquer.
Merci