Slider php mysql

**mcrestey** · 22/03/2017, 18h20

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

**JefReb** · 23/03/2017, 08h15

Regardez bien votre code ...

Code html :

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

1
2
3
4
5
<h1>Ce qu'ils en disent</h1>
<?php
while ($donnees = $reponse->fetch())
{
?>

qui se trouve avant <body> ?????

Peut être que ceci explique cela ...

**JefReb** · 23/03/2017, 08h39

ps:
Peut-être faudrait-il aussi que la fonction php

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
<?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');
?>
<!doctype html>
<html>
...

soit pacée avant <!doctype html>. peut-être ...

**mcrestey** · 23/03/2017, 09h08

Merci pour ton aide JefReb, j'ai suivi tes conseils et modifié l'emplacement de ma fonction, ainsi que celui de ma boucle.
J'ai bien a présent une seule partie "slider", en revanche, le texte ne rentre pas dans le bloc, il est en ligne continue et ce sont les lignes du textes qui défilent, de plus, mon 2e textes ne se met pas dans une seconde slide mais en dessous du premier slide...

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
47
48
49
50
<?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');
?>
 
<html>
<head>
<link rel="stylesheet" type="text/css" href="test.css" />
</head>
 
<body>
 
<h1>Ce qu'ils en disent</h1>
 
 
<div id="cssSlider">
  <div id="sliderImages">
 
		<p id="si_1">  
		<?php
while ($donnees = $reponse->fetch())
{
?>
<?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>

Invité · 23/03/2017, 10h17

Bonjour,

ici, tu es dans le forum CSS.
donc pas de code PHP -> montre-nous le code HTML généré ("Ctrl"+"U")
de plus, ça te permettra de voir si ce code HTML généré est correct / valide.

**mcrestey** · 23/03/2017, 10h55

Voilà le code html généré :

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
 
 
<html>
<head>
<link rel="stylesheet" type="text/css" href="test.css" />
</head>
 
<body>
 
<h1>Ce qu'ils en disent</h1>
 
 
<div id="cssSlider">
  <div id="sliderImages">
 
		<p id="si_1">  
		Marie Crestey s'est vu confier au fil de son apprentissage la conception et la mise en page de documents de communication de plus en plus lourds et complexes à gérer. Elle a assumé ses responsabilités avec la même motivation au fil des dossiers. La fiabilité et la rapidité d'exécution de son travail tiennent principalement à sa qualité d'écoute, sa compréhension des problématiques, son sérieux et son assiduité. Les graphistes de notre studio graphique et moi-même avons apprécié sa capacité à travailler en équipe, sa discrétion, ainsi que sa volonté de progresser, notamment en matière de création appliquée au web design. Nous lui sommes reconnaissants de son engagement professionnel.-Elodie Billard - Directrice de la Communication - Mairie de Saint-Etienne </p>
 
		<div style="clear:left;"></div>
	</div>
</div>
 
 
 
Marie Crestey a travaillé un an au sein du service communication de la CCHB à partir d'avril 2016 en tant que chargée de communication - infographiste multimédia. Durant cette période, elle a fait preuve d’implication, de sérieux et d’efficacité. Tous les objectifs ont été réalisés dans les temps. Ses qualités professionnelles ainsi que ses capacités relationnelles ont fortement été appréciées au sein du service, et plus généralement de l’ensemble de la Communauté de Communes.-Guillaume Rodde - Responsable du service Communication - Communauté de communes Haut-Bugey </p>
 
		<div style="clear:left;"></div>
	</div>
</div>
 
 
 
 
</body>
</html>

Le problème est que le deuxième texte ne s'intègre pas dans la div slider...

Slider php mysql

CSS

Vue hybride

Discussions similaires

Partager

Partager