Carousel jquery avec mes données mysql

Version imprimable

Bonjour 8-),

J'ai une template html avec un carousel jquery pour les commentaires des clients.

Les commentaires des clients se retrouvent dans ma base de données après insertion (jusque là tout est ok).

Seulement dans la template, il n'y a que 5 commentaires écrits et inséré dans du simple html hors moi j'aimerais que ce soit les commentaires de ma base de données qui défilent.

Je ne suis vraiment pas une pro de javascript et jquery :-/ donc si vous avez de bons tutos? Conseils ?

D'ailleurs je ne sais même dans quel fichier Javascript je dois aller chercher:

Code:

1
2
3
4
<script src="plugins/owl-carousel/owl.carousel.min.js"></script>
<script src="plugins/ekko-lightbox/ekko-lightbox.min.js"></script>
<script src="js/waypoints.min.js"></script>
<script src="js/func.js"></script>

Voilà ce que j'avais démarré, mais bien sûr, ça ne défile pas, ça se met juste l'un en dessous de l'autre.

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
<?php
// Connexion à la base de données
try
{
    $bdd = new PDO('mysql:host=localhost;dbname=Lloret;charset=utf8', 'root', '');
}
catch(Exception $e)
{
        die('Erreur : '.$e->getMessage());
}
// On récupère les 5 derniers NEWS_TAB_ARTICLES
$req = $bdd->query('SELECT news_id, news_titre, news_contenu, DATE_FORMAT(news_date, \'%d/%m/%Y à %Hh%imin%ss\') AS news_date_fr FROM NEWS_TAB_ARTICLES ORDER BY news_date DESC LIMIT 0, 5');
while ($donnees = $req->fetch())
{
?>
<section class="quote-olw bg-wrapper q-h-1">
				<div class="wrapper">
					<div class="row-1">
						<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
							<div class="section-title-box wow rollIn center  ">
								<h2>La satisfaction de nos clients: une priorité</h2>
							</div>
						</div>
					</div>
					<div class="row-1">
						<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
							<div id="quote-olw-h1">
								<div class="quote-box">
									<quote class="quote-block-2">
										<div class="quote-wrap">
											<div class="quote-photo">
												<img class="#" alt="image" src="media/76x76/image2.jpg">
											</div>
											<div class="text-quote">
												<?php echo nl2br(htmlspecialchars($donnees['news_contenu']));?>
											</div>
										</div>
										<span class="ef arrow_triangle-down"></span>
									</quote>
									<div class="q-signature">
										<h4><?php echo htmlspecialchars($donnees['news_titre']); ?></h4>
									</div>
								</div>
</div>
							</div>
						</div>
					</div>
					<div class="image-folw"></div>
				</div>
			</section>
<?php
} // Fin de la boucle des NEWS_TAB_ARTICLES
$req->closeCursor();
?>

16/04/2016, 09h08
NoSmoking
Bonjour,
au moins deux choses :
- la librairie jQuery est-elle intégrée dans ta page ;
- regarde le code HTML généré pour voir si il n'y avait pas d'erreur.
18/04/2016, 08h09
Sid05

Pour le moment, je n'ai encore rien intégré de ma base de données.

Tout marche correctement.

Ma question est comment faire pour intégré les éléments de ma base de données dans le carousel. Si vous avez des tutos ou des conseils?

Merci et bon lundi ;)

Voici pour le moment mon code :

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
<section class="quote-olw bg-wrapper q-h-1">
				<div class="wrapper">
					<div class="row-1">
						<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
							<div class="section-title-box wow rollIn center  ">
								<h2>La satisfaction de nos clients: une priorité</h2>
								<span>Retrouvez ci-dessous nos différents témoignages</span>
							</div>
						</div>
					</div>
 
                    <?php
 
// Connexion à la base de données
 
try
 
{
 
    $bdd = new PDO('mysql:host=localhost;dbname=Lloret;charset=utf8', 'root', '');
 
}
 
catch(Exception $e)
 
{
 
        die('Erreur : '.$e->getMessage());
 
}
 
 
// On récupère les 5 derniers NEWS_TAB_ARTICLES
 
$req = $bdd->query('SELECT news_id, news_titre, news_contenu, news_photo, DATE_FORMAT(news_date, \'%d/%m/%Y à %Hh%imin%ss\') AS news_date_fr FROM NEWS_TAB_ARTICLES ORDER BY news_date DESC LIMIT 0, 5');
 
 
while ($donnees = $req->fetch())
 
{
 
 
                    $donnees["news_id"] = $donnees["news_id"]-5;
echo"
						<div class=\"row-1\">
                    	<div class=\"col-lg-12 col-md-12 col-sm-12 col-xs-12\">
							<div class=\"quote-olw-h1\">
                               <div class=\"quote-box\">
                                  <quote class=\"quote-block-2\">
										<div class=\"quote-wrap\">
										     <div class=\"quote-photo\">
													<img src=\"gestion-clients/upload/images/news_photos/".$donnees["news_photo"]."\" />
											</div>
                                            	<div class=\"text-quote\">
                                    <div class=\"text-quote\">".$donnees['news_contenu']."</div>

											</div>
										</div>
										<span class=\"ef arrow_triangle-down\"></span>

									</quote>
                                    <h4><div class=\"q-signature\">".$donnees['news_titre']."</h4></div>

									</div>
								</div>
								
								</div></section>" 
 
								?>
 
 
 
<?php
 
} // Fin de la boucle des NEWS_TAB_ARTICLES
 
$req->closeCursor();
 
?>

Les données s'affichent bien mais j'ai perdu l'effet "carousel". Les commentaires ne défilent plus mais sont inscrits l'un derrière les autres