Slider php mysql

Version imprimable

Slider php mysql

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:

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:

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

23/03/2017, 08h15
JefReb
Regardez bien votre code ...
Code:

1 2 3 4 5 <h1>Ce qu'ils en disent</h1> <?php while ($donnees = $reponse->fetch()) { ?>
qui se trouve avant <body> ?????:P
Peut être que ceci explique cela ...

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

Code:

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 ...

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:

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>

23/03/2017, 10h17
Invité

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.

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

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
 
 
<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...

On voit clairement que le code HTML n'est pas valide.

Il faut revoir ton code PHP, notamment les positions de l'ouverture et de la fermeture du while.

CELA DIT, quand je vois le CSS, avec des dimensions en pixels, je me dis que ce n'est pas très "responsive" tout ça...
Tu ferais mieux de chercher un autre script de slider, qui fonctionne aussi avec du texte (ou du code HTML : image, titre,...)

[EDIT] J'en ai trouvé un qui répond exactement à ton besoin : https://codepen.io/johnlouie04/pen/BqyGb
(pas responsive, mais on peut adapter les dimensions via media queries)

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="slider">
<ul>
	<li>
	<div class="slider-container">
    <h4>Pure CSS slider Content</h4>
		<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries,</p>
	</div>
	</li>
		<li>
		<div class="slider-container">
       <h4>Pure CSS slider Content</h4>
		<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries,</p>
	</div>
	</li>
		<li>
		<div class="slider-container">
       <h4>Pure CSS slider Content</h4>
		<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries,</p>
	</div>
	</li>
		<li>
		<div class="slider-container">
      <h4>Pure CSS slider Content</h4>
		<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries,</p>
	</div>
	</li>
</ul>
</div>

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
a
{
	text-decoration: none;
	color: #111b47;
}
 
a:hover
{
	border-bottom: 1px dashed #ED971F;
	color: #ED971F;
}
 
/**** slider ****/
 
#slider, ul
{
	height: 200px;
}
 
#slider
{
	margin: auto;
	overflow: hidden;
	padding: 20px;
	border: 1px solid rgba(0, 0, 0, 0.15);
	margin-top: 50px;
	border-radius: 10px;
	box-shadow: 2px 2px 14px rgba(0, 0, 0, 0.25);
	position: relative;
	width: 600px;
}
 
#slider li
{
	float: left;
	position: relative;
	width: 600px;
	display: inline-block;
	height: 200px;
}
 
#slider ul
{
	list-style: none;
	position: absolute;
	left: 0px;
	top: 0px;
	width: 9000px;
	transition: left .3s linear;
	-moz-transition: left .3s linear;
	-o-transition: left .3s linear;
	-webkit-transition: left .3s linear;
	margin-left: -25px;
  font-family: century gothic;
  color: #666;
}
 
/*** Content ***/
 
.slider-container
{
	margin: 0 auto;
	padding: 0;
	width: 550px;
  min-height: 180px;
  border-bottom: 1px solid #ccc;
}
 
.slider-container h4
{
 	color: #0A7FAD;
  text-shadow: -1px 0px 0px rgba(0, 0, 0, 0.50);
}
 
.slider-container  p
{
	margin: 10px 25px;
	font-weight: semi-bold;
	line-height: 150%;
	text-align: justify;
}
 
/*** target hooks ****/
 
@-webkit-keyframes slide-animation {
	0% {opacity:0;}
	2% {opacity:1;}
	20% {left:0px; opacity:1;}
	22.5% {opacity:0.6;}
	25% {left:-600px; opacity:1;}
	45% {left:-600px; opacity:1;}
	47.5% {opacity:0.6;}
	50% {left:-1200px; opacity:1;}
	70% {left:-1200px; opacity:1;}
	72.5% {opacity:0.6;}
	75% {left:-1800px; opacity:1;}
	95% {opacity:1;}
	98% {left:-1800px; opacity:0;} 
	100% {left:0px; opacity:0;}
}
 
#slider ul
{
	-webkit-animation: slide-animation 25s infinite;
}
 
/* use to paused the content on mouse over */
 
#slider ul:hover
{
	-moz-animation-play-state: paused;
	-webkit-animation-play-state: paused;
}

Merci jreaux62, avec ton code j'ai réussi à faire mon slider avec deux slides qui correspondent bien chacune a un texte de ma base de donnée.
Par contre, les textes se chevauchent d'une slide à l'autre sur le bord droit, puis quand la slide change, le bord droit... si je cale la première slide correctement, c'est la deuxième qui est décalé ensuite et vis versa... une idée?

Deuxième problème, lorsque je regarde le code html généré, j'ai une troisième slide (donc <li>) vide qui apparait et qui défile donc également... comment faire pour qu'elle ne soit pas là...

Merci par avance

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
<?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="test2.css" />
</head>
 
<body>
 
<div id="slider">
<ul>
 
 
<li><?php
while ($donnees = $reponse->fetch())
{
?><?php echo $donnees['texte']."-".$donnees['nom_prenom']." - " .$donnees['fonction']." - " .$donnees['entreprise']; 
		?>
 
	<li><?php
}
 
$reponse->closeCursor(); // Termine le traitement de la requête
 
?>
	</li>	
</ul>
</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
@charset "UTF-8";
/* CSS Document */
 
 
/**** slider ****/
 
#slider, ul
{
	height: 200px;
}
 
#slider
{
	margin: auto;
	overflow: hidden;
	padding: 20px;
	border: 1px solid rgba(0, 0, 0, 0.15);
	margin-top: 50px;
	border-radius: 10px;
	box-shadow: 2px 2px 14px rgba(0, 0, 0, 0.25);
	position: relative;
	width: 550px;
}
 
#slider li
{
	float: left;
	position: relative;
	width: 550px;
	display: inline-block;
	height: 200px;
	margin-left:0px;
	padding:10;
}
 
#slider ul
{
	list-style: none;
	position: absolute;
	left: 0px;
	top: 0px;
	width: 9000px;
	transition: left .3s linear;
	-moz-transition: left .3s linear;
	-o-transition: left .3s linear;
	-webkit-transition: left .3s linear;
	margin-left: 0px;
  font-family: century gothic;
  color: #666;
}
 
 
/*** target hooks ****/
 
@-webkit-keyframes slide-animation {
	0% {opacity:0;}
	2% {opacity:1;}
	20% {left:0px; opacity:1;}
	22.5% {opacity:0.6;}
	25% {left:-600px; opacity:1;}
	45% {left:-600px; opacity:1;}
	47.5% {opacity:0.6;}
	50% {left:-1200px; opacity:1;}
	70% {left:-1200px; opacity:1;}
	72.5% {opacity:0.6;}
	75% {left:-1800px; opacity:1;}
	95% {opacity:1;}
	98% {left:-1800px; opacity:0;} 
	100% {left:0px; opacity:0;}
}
 
#slider ul
{
	-webkit-animation: slide-animation 25s infinite;
}
 
/* use to paused the content on mouse over */
 
#slider ul:hover
{
	-moz-animation-play-state: paused;
	-webkit-animation-play-state: paused;
}

23/03/2017, 15h09
Invité

Pareil que la 1ère fois : affiche le code HTML généré, et corrige en conséquence.

Indice : le while est encore ouvert et fermé n'importe où...

D'autre part, on ne retrouve plus dans ton code le <div class="slider-container">... </div>, qui avait, tu devrais t'en douter, une certaine importance... :aie:
23/03/2017, 15h20
mcrestey

Concernant la boucle while, comme je le disait dans mon premier message, je débute en php, donc je t'avoue que je l'ai mis là ou ça faisait ce qui se rapprochait le mieux de ce que je voulais... pour le <div class="slider-container">... </div>, je l'ai également viré car j'arrivai a obtenir (presque) le résultat voulu sans...
J'ai bien généré le code html et je vois l'erreur qui me pose problème, pour la slide en plus il s'agit d'une balise <li></li> vide, en revanche je ne sais pas comment la supprimer puisqu'elle apparait avec le code php...

Ce n'est pas bien compliqué.

Il faut regarder (dans le code donné en exemple) :

ce qui se répète -> à mettre DANS la boucle
le reste -> en dehors de la boucle

Ca donne :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 <div id="slider"> <ul> <?php // requête $reponse=$bdd->query('SELECT * FROM avis'); // boucle while ($donnees = $reponse->fetch()) { ?> <li> <div class="slider-container"> <p><?php echo $donnees['texte']."-".$donnees['nom_prenom']." - " .$donnees['fonction']." - " .$donnees['entreprise']; ?></p> </div> </li> <?php } // fin while ?> </ul> </div>

PAR CONTRE, il faut LIMITER le nombre à 4, comme dans le code d'exemple :

Code:

$reponse=$bdd->query('SELECT * FROM avis LIMIT 0, 4');

En effet, dans l'exemple, on trouve dans le CSS :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 @-webkit-keyframes slide-animation { 0% {opacity:0;} 2% {opacity:1;} 20% {left:0px; opacity:1;} 22.5% {opacity:0.6;} 25% {left:-600px; opacity:1;} 45% {left:-600px; opacity:1;} 47.5% {opacity:0.6;} 50% {left:-1200px; opacity:1;} 70% {left:-1200px; opacity:1;} 72.5% {opacity:0.6;} 75% {left:-1800px; opacity:1;} 95% {opacity:1;} 98% {left:-1800px; opacity:0;} 100% {left:0px; opacity:0;} }
Or, cela correspond aux transitions pour 4 slides. Pas une de +, pas une de -.
Sinon, il faut modifier ce bout de code.

N.B. évidemment, si tu veux aussi modifier la largeur (600px -> 800px, par ex.) , il faudra le répercuter dans tout le code CSS...

23/03/2017, 16h00
mcrestey

Merci beaucoup ! C'est beaucoup mieux ! Je manque encore d'entrainement concernant le php, les boucles...
Du coup pour avoir seulement 2 slides, je dois modifier le code keyframes slide animation? car j'ai toujours la slide vide à la fin(qui n'apparait par contre plus dans le html généré)...
Pour la taille des éléments, ça je vais y arriver seule.
23/03/2017, 16h35
mcrestey

C'est tout bon, en modifiant le code CSS j'ai mes deux slides seulement !
Merci beaucoup pour ton aide !!
23/03/2017, 17h00
Invité

Ce serait bien que tu postes ta solution.

Car ça peut intéresser d'autres personnes.

Pas de soucis.
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
43
44
<?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());
}
 
 
 
?>
 
<html>
<head>
<link rel="stylesheet" type="text/css" href="test2.css" />
</head>
 
<body>
 
<div id="slider">
<ul>
<?php
$reponse=$bdd->query('SELECT * FROM avis');
while ($donnees = $reponse->fetch())
{
?>
 
<li>
<div class="slider-container">
<p>
<?php echo $donnees['texte'];
		?><br><br> <?php echo $donnees['nom_prenom']." - " .$donnees['fonction']." - " .$donnees['entreprise']?></p>
 </div>
</li>
 
<?php
}
$reponse->closeCursor(); // Termine le traitement de la requête
?>
 
</ul>
</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
@charset "UTF-8";
/* CSS Document */
 
/**** slider ****/
 
#slider, ul
{
	height: 270px;
}
 
#slider
{
	margin: auto;
	overflow: hidden;
	padding: 20px;
	border: 1px solid rgba(0, 0, 0, 0.15);
	margin-top: 50px;
	border-radius: 10px;
	box-shadow: 2px 2px 14px rgba(0, 0, 0, 0.25);
	position: relative;
	width: 600px;
}
 
#slider li
{
	float: left;
	position: relative;
	width: 600px;
	display: inline-block;
	height: 270px;
}
 
#slider ul
{
	list-style: none;
	position: absolute;
	left: 0px;
	top: 0px;
	width: 9000px;
	transition: left .3s linear;
	-moz-transition: left .3s linear;
	-o-transition: left .3s linear;
	-webkit-transition: left .3s linear;
	margin-left: -25px;
  font-family: century gothic;
  color: #666;
}
 
/*** Content ***/
 
.slider-container
{
	margin: 0 auto;
	padding: 0;
	width: 550px;
  min-height: 180px;
}
 
 
.slider-container  p
{
	margin: 10px 25px;
	font-weight: semi-bold;
	line-height: 150%;
	text-align: justify;
}
 
/*** target hooks ****/
 
@-webkit-keyframes slide-animation {
	0% {opacity:0;}
	2% {opacity:1;}
	45% {left:0px; opacity:1;}
	51% {left:-600px; opacity:0.4;}
	53% {left:-600px; opacity:1;}
	100% {left:-600px; opacity:1;}
}
 
#slider ul
{
	-webkit-animation: slide-animation 80s infinite;
}