Bonjour,
Je suis actuellement en formation est mon formateur ma demandé de réaliser un site avec un carrousel en html css javascript et php) jusque la tout vas bien.
Cependant il ma demandé pour la suite de réaliser des inputs de types number et de pouvoir afficher l'image de départ du carrousel puis combie, d'image on veux par exemple démarré sur l'image 3 et finir le carrousel sur la 5eme image le tout en php.
Le souci c'est que je ne sais pas par ou demarré mon php.
Pour le moment j'ai realiser cela:
mon
mon
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
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 <!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> <link rel="stylesheet" href="exo_diapo_volcans/test_diapo/css/style.css"> <script src="volcan.js" defer></script> <title>Diaporama ASIE chargement ajax</title> </head> <body> <nav class="navbar navbar-expand-lg navbar-dark bg-dark"> <div class="container-fluid"> <a class="navbar-brand" href="#"><img src="exo_diapo_volcans/test_diapo/img/logo.jpg" alt="logo Ponant" width="60"></a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarNav"> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link active" aria-current="page" href="#">Accueil</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Voyage Volcans Asie</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Voyage USA côte ouest </a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false"> Voyage en Baie de Somme </a> <ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink"> <li><a class="dropdown-item" href="#">Le phare du Hourdel</a></li> <li><a class="dropdown-item" href="#">Les phoques et veaux marins du Hourdel</a></li> <li><a class="dropdown-item" href="#">L'Avocette de la vasière</a></li> </ul> </li> </ul> </div> </div> </nav> <div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="false"> <div class="carousel-inner"> </div> <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="visually-hidden">Previous</span> </button> <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="visually-hidden">Next</span> </button> </div> <fieldset> <h1>Choisir vos diapos</h1> <label for="min">Départ diaporama</label> <input type="number" name="min" id="min"> <label for="max">fin diaporama</label> <input type="number" name="max" id="max"> <button type="submit">valider</button> </fieldset> <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script> </body> </html>Mon code json
Code CSS : 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 body{ background-color: beige; } p{ text-align: center; color: white; font-weight: bold; background-color: rgba(107, 96, 96, 0.427); } #carouselExampleCaptions{ margin-left: auto; margin-right: auto; width: 50%; height: 20%; } fieldset{ background-color: grey; border:2px solid black; width: 50%; -moz-border-radius: 10px; /* -webkit-border-radius: 10px; */ border-radius: 10px; margin: auto; } .carousel img{ width: 100% ; border-radius: 100%; } h1{ text-align: center; font-size: xx-large; }
Code javascript : 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
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
114
115
116
117
118
119
120
121
122
123 [ { "id":1, "titre":"LIle de Lombok vue depuis lîle de Trawangan (Iles Gili)", "alt":"LIle de Lombok vue depuis lîle de Trawangan (Iles Gili) «- volcans en indonésie »" }, { "id":2, "titre":"Le volcan Agung, Bali.", "alt":"Le volcan Agung, Bali. «- volcans en indonésie »" }, { "id":3, "titre":"Construction dune embarcation traditionnelle, Lovina Beach, Bali.", "alt":"Construction dune embarcation traditionnelle, Lovina Beach, Bali. «- volcans en indonésie »" }, { "id":4, "titre":"Pêcheur artisanal sur la côte balinaise", "alt":"Pêcheur artisanal sur la côte balinaise «- volcans en indonésie »" }, { "id":5, "titre":"Coucher de soleil sur la Mer de Bali", "alt":"Coucher de soleil sur la Mer de Bali«- volcans en indonésie »" }, { "id":6, "titre":"Echange spirituel au temple hindou « Pura Ulun Danu », Bali.", "alt":"Echange spirituel au temple hindou « Pura Ulun Danu », Bali.«- volcans en indonésie »" }, { "id":7, "titre":"Scène de vie quotidienne (nourriture destinée aux cochons), Lovina Beach, Bali.", "alt":"Scène de vie quotidienne (nourriture destinée aux cochons), Lovina Beach, Bali.«- volcans en indonésie »" }, { "id":8, "titre":"Epouillage en règle à la forêt des singes dUbud ; cet animal est sacré pour les Balinais.", "alt":"Epouillage en règle à la forêt des singes dUbud ; cet animal est sacré pour les Balinais.«- volcans en indonésie »" }, { "id":9, "titre":"Forêt des singes dUbud, Bali.", "alt":"Forêt des singes dUbud, Bali.«- volcans en indonésie »" }, { "id":10, "titre":"Arbre de la forêt des singes dUbud. Il sagit de racines et non de lianes.", "alt":"Arbre de la forêt des singes dUbud. Il sagit de racines et non de lianes.«- volcans en indonésie »" }, { "id":11, "titre":"Nénuphars du jardin aquatique de Tirta Gangga, Bali.", "alt":"«- volcans en indonésie »" }, { "id":12, "titre":"Nénuphars du jardin aquatique de Tirta Gangga, Bali.", "alt":"Nénuphars du jardin aquatique de Tirta Gangga, Bali.«- volcans en indonésie »" }, { "id":13, "titre":"Coq dans une cage en bambou. Les combats de coqs sont interdits en dehors de lenceinte des temples, mais les Balinais en sont friands et en organisent clandestinement.", "alt":"Coq dans une cage en bambou. Les combats de coqs sont interdits en dehors de lenceinte des temples, mais les Balinais en sont friands et en organisent clandestinement.«- volcans en indonésie »" }, { "id":14, "titre":"Rizières de Jatiluwih, Bali.", "alt":"«- volcans en indonésie »" }, { "id":15, "titre":"Cratère du volcan Bromo, vénéré par les Javanais hindous. Haut-lieu de pèlerinage et doffrandes, un temple est édifié à ses pieds. Ile de Java.", "alt":"Cratère du volcan Bromo, vénéré par les Javanais hindous. Haut-lieu de pèlerinage et doffrandes, un temple est édifié à ses pieds. Ile de Java.«- volcans en indonésie »" }, { "id":16, "titre":"Massif du Tengger, très fertile en raison des dépôts volcaniques. Les cultures se situent en bordure de la caldeira du Bromo. Une caldeira est une immense dépression formée consécutivement à leffondrement de la chambre magmatique du volcan. Ile de Java. ", "alt":"Massif du Tengger, très fertile en raison des dépôts volcaniques. Les cultures se situent en bordure de la caldeira du Bromo. Une caldeira est une immense dépression formée consécutivement à leffondrement de la chambre magmatique du volcan. Ile de Java.«- volcans en indonésie »" }, { "id":17, "titre":"Le Mont Bromo et sa caldeira, avec, en arrière-plan, le Semeru, qui « explose » toutes les 30 mn environ et qui culmine à 3 676 m, en faisant le point culminant de lîle de Java.", "alt":"Le Mont Bromo et sa caldeira, avec, en arrière-plan, le Semeru, qui « explose » toutes les 30 mn environ et qui culmine à 3 676 m, en faisant le point culminant de lîle de Java.«- volcans en indonésie »" }, { "id":18, "titre":"Lac de cratère du volcan Batur, Bali.", "alt":"Lac de cratère du volcan Batur, Bali.«- volcans en indonésie »" }, { "id":19, "titre":"Cratère du Kawah Ijen et son lac acide, sans doute le plus acide au monde ; extrême ouest de Java. ", "alt":"Cratère du Kawah Ijen et son lac acide, sans doute le plus acide au monde ; extrême ouest de Java.«- volcans en indonésie »" }, { "id":20, "titre":"Vapeur deau émanant du cratère du volcan Bromo. On remarque des dépôts soufrés sur ses parois.", "alt":"Vapeur deau émanant du cratère du volcan Bromo. On remarque des dépôts soufrés sur ses parois.«- volcans en indonésie »" }, { "id":21, "titre":"Idem.", "alt":"Idem.«- volcans en indonésie »" }, { "id":22, "titre":"Affleurement lors de lascension du Kawah Ijen, à lextrême ouest de Java.", "alt":"«- volcans en indonésie »" }, { "id":23, "titre":"Chargement de plaques de soufre extraites du cratère du Kawah Ijen, à lextrême ouest de Java. La production est remontée à dos dhommes, sans équipement particulier et peut peser jusquà 80kg.", "alt":"«- volcans en indonésie »" }, { "id":24, "titre":"Zone dextraction du soufre, dont les gaz concentrés dans des conduits se liquéfient et ruissellent, prenant une couleur orangée (environ 120 degrés). La fumée est extrêmement toxique. Une fois refroidi, le soufre sera cassé à la barre à mine et chargé dans de simples paniers.", "alt":"«- volcans en indonésie »" } ]
mon
Code javascript : 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 function genereImage(monObjet, monItem) { let monImg = document.createElement("img"); monImg.setAttribute("src", "photos_volcans/fond" + monObjet.id + ".jpg"); monImg.setAttribute("alt", monObjet.titre); monItem.appendChild(monImg); } function monTitre(monObjet, monCaption) { let monTitre = document.createElement("p"); monTitre.innerText = monObjet.titre; monCaption.appendChild(monTitre); } function genereDiapo(_data) { for (let i = 0; i < _data.length; i++) { let monObjet = _data[i]; if (i == 0) { let monItem = document.createElement("div"); monItem.setAttribute("class", "carousel-item active"); document.querySelector(".carousel-inner").appendChild(monItem); genereImage(monObjet, monItem); let monContainer = document.createElement("div"); monContainer.setAttribute("class", "carousel-caption d-none d-md-block"); monItem.appendChild(monContainer); let monCaption = document.createElement("div"); monCaption.setAttribute("class", "carousel-caption"); monContainer.appendChild(monCaption); monTitre(monObjet, monCaption); } else { let monItem = document.createElement("div"); monItem.setAttribute("class", "carousel-item"); genereImage(monObjet, monItem); let monContainer = document.createElement("div"); monContainer.setAttribute("class", "carousel-caption d-none d-md-block"); monItem.appendChild(monContainer); let monCaption = document.createElement("div"); monCaption.setAttribute("class", "carousel-caption"); monContainer.appendChild(monCaption); monTitre(monObjet, monCaption); document.querySelector(".carousel-inner").appendChild(monItem); } } } fetch("volcan.json") .then(response=>response.json()) .then(data=>genereDiapo(data)) .then(response=>console.log(response)) .catch(error=>alert("erreur: "+ error));
Partager