Création de boutons suivant et précédent pour un diaporama.

**Sergio_zero** · 01/09/2018, 15h28

Bonjour à tous et à toutes,
Aujourd'hui j'aurai besoins de votre aide pour créer des boutons suivant et précédent pour un diaporama.
J'ai un petit script qui me permet de faire défiler des div de gauche à droite avec du css.
Toutes les infos sont dans une base de données mais la n'est pas le problème, des boutons sont créé pour chaque ligne qui est dans cette base de données.
Lorsque l'on clique sur un des boutons les div défilent jusqu’à la div qui correspond au numéro du bouton grâce à des liens ancre.
Voici une demo en ligne ici
Sur le même principe je voudrai mettre en ligne un catalogue de 42 pages et du coup il y à trop de bouton donc j'ai l'idée dans afficher seulement 4 avec un bouton précédent et suivant et c'est la le problème.
J'arrive à faire les boutons mais avec une variable $_GET ce qui a pour effet de recharger la page et je perd l'effet de défilement de gauche à droite.
Voici le script qui affiche les div

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
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
<?php
$nombreDeModelesParPage = 1;
$liens = array();
$contenu_slide = array();
 
$reponse_faq = $bdd->query('SELECT id FROM liste_page_catalogue ORDER BY id ASC');
$reponse_faq->execute();
$total_faq = $reponse_faq->rowCount();
if (empty($total_faq))
	{
		echo '<p class="centre bleu">Aucune page pour le moment.</p>';
	}
else
	{
		$nombre_pages = ceil($total_faq / $nombreDeModelesParPage);
		if (!empty($_GET['choix']) && is_numeric($_GET['choix']))
			{
				$page_actuelle = intval($_GET['choix']);
				if ($page_actuelle > $nombre_pages && $nombre_pages != 0)
					{
						$page_actuelle = $nombre_pages;
					}
			}
		else
			{
				$page_actuelle = 1; 
			}
		$premiere_entree = ($page_actuelle - 1) * $nombreDeModelesParPage;
		$add = '';
		echo'<div class="centre">'.pagination_catalogue($nombre_pages, $page_actuelle, $add).'</div><br/>';
	}
$reponse_faq->closeCursor();
 
$retour_maquette = $bdd->query('SELECT id,nom_page,lien_page,nom_image,description,ordre_affichage FROM liste_page_catalogue ORDER BY id ASC');
$retour_maquette->execute();
$num_commerces = $retour_maquette->rowCount();
while ($res_maquette = $retour_maquette->fetch())
	{
		$liens[$res_maquette['id']] = $res_maquette['nom_page'];
		$contenu_slide[$res_maquette['id']][] = $res_maquette;
	}
$retour_maquette->closeCursor();
echo'<div id="liens">';
foreach ($liens as $key => $resultat_values)
	{
		echo'<div class="tabs_gris"><a href="#wrap'.$key.'"><span>'.stripslashes($liens[$key]).'</span></a></div>';
	}	
echo'</div>';
echo'<section id="article35">
	<div id="demoWrap">';
		foreach ($liens as $clef => $valeurs_liens)
			{
				echo'<a id="wrap'.$clef.'" class="ancre"></a>';
			}
        echo'<div id="imgs"><ul>';
		foreach ($contenu_slide as $cle => $valeurs_contenu_slide)
			{
				foreach($valeurs_contenu_slide as $clef_slide => $values)
					{
						echo'<li><div id="slide'.$cle.'"><img src="'.ROOTPATH.'/images/catalogue/modeles_min/'.$values['nom_image'].'" 
						alt="'.stripslashes(trim($values['nom_page'])).'"/><p><a href="'.$values['lien_page'].'" title="Accédez au pack promo '.stripslashes($values['nom_page']).'."><span class="ttgros courrier orange">'.stripslashes(trim($values['nom_page'])).'</span></a></p>
						<hr color="#05953e" />
						<p class="bleu">'.$page_actuelle.' - '.stripslashes(nl2br($values['description'])).'</p></div></li>';
					}
			}
		echo'</ul></div>
    </div>
</section>';
echo'<h2>Commendez vos packs de monture de lunette</h2>';
 
?>

et le script de la fonction qui est chargée de gérer l'affichage des boutons

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
51
52
53
54
55
56
57
<?php
function pagination_catalogue($nombre_pages, $page_actuelle, $add = FALSE)
	{
		if ($nombre_pages > 1) 
			{	
				$precedente = $page_actuelle - 1;
				$suivante = $page_actuelle + 1;
				$max = $page_actuelle + 2;
				$min = $page_actuelle - 2;
				$return = '';
				$adresse1 = trim(str_replace('.html', '', $_SERVER['REQUEST_URI']), '/').'.';
				$adresse = explode('.', $adresse1);
				define('FIRST_DATA_URL', 0);
				$page = $adresse[FIRST_DATA_URL];
    	        if ($page_actuelle != 1)
					{
   						$return .= '<div class="boutons_zform_bleu"><a href="'.$adresse[0].'.'.(!empty($add) ? $add : '').''.$precedente.'.html#wrap'.$precedente.'"><span>Précédente</span></a></div>';
					}
				for ($i = 1; $i <= $nombre_pages; $i++)
					{ 
						if ($i == $min - 1)
							{
								$return .= '<div class="boutons_zform_gris"><span>...</span></div>';
							}
						if (($i <= $max) && ($i >= $min))
							{
								if ($i != $max && $i != $nombre_pages)
									{
										$pages = '<div class="boutons_zform_gris"><span>'.$i.'</span></div>';
										$url = '<div class="boutons_zform_bleu"><a href="'.$adresse[0].'.'.(!empty($add) ? $add : '').''.$i.'.html#wrap'.$i.'"><span>'.$i.'</span></a></div>';
									}
								else
									{
										$pages = '<div class="boutons_zform_gris"><span>'.$i.'</span></div>';
										$url = '<div class="boutons_zform_bleu"><a href="'.$adresse[0].'.'.(!empty($add) ? $add : '').''.$i.'.html#wrap'.$i.'"><span>'.$i.'</span></a></div>';
									}
								if ($i == $page_actuelle)
									{
										$return .= $pages; 
									}	
								else
									{
										$return .= $url;
									}
							}
						if ($i == $max + 1)
							{
								$return .= '<div class="boutons_zform_gris"><span>...</span></div>';
							}
					}
				if ($page_actuelle != $nombre_pages)
					{
						$return .= '<div class="boutons_zform_bleu"><a href="'.$page.'.'.(!empty($add) ? $add : '').''.$suivante.'.html#wrap'.$suivante.'"><span>Suivante</span></a></div>';
					}
				return $return;
			}
	}?>

Merci à tous et à toutes pour votre aide.

Invité · 01/09/2018, 15h43

Bonjour,

comme tu l'as sans doute deviner, l'action se passe "coté client".
Donc, PHP n'y peut plus rien, puisqu'il agit "coté serveur".

Il faudra gérer tes boutons "suivant" et "précédent" en JavaScript.

Donc : pose ta question dans le forum JavaScript, en fournissant le "code source généré" (SANS PHP).

Tu peux aussi opter pour un slider jQuery "prêt-à-l'emploi".
Par exemple : slick slider.

Création de boutons suivant et précédent pour un diaporama.

PHP & Base de données

Discussions similaires

Partager

Partager