From 232065e8b1e38daa18bb258476a31e3b118e36b8 Mon Sep 17 00:00:00 2001 From: bridgte Date: Fri, 29 Mar 2024 16:06:13 +0100 Subject: [PATCH 01/12] ajout fleche de gauche --- index.html | 1 + 1 file changed, 1 insertion(+) diff --git a/index.html b/index.html index 8c07106a..52ea6e8f 100644 --- a/index.html +++ b/index.html @@ -20,6 +20,7 @@

From 94653af711778f6b8123cb553773c3816b629a6f Mon Sep 17 00:00:00 2001 From: bridgte Date: Fri, 29 Mar 2024 16:12:03 +0100 Subject: [PATCH 02/12] ajout fleche gauche --- index.html | 1 + 1 file changed, 1 insertion(+) diff --git a/index.html b/index.html index 8c07106a..15603943 100644 --- a/index.html +++ b/index.html @@ -20,6 +20,7 @@

From 1cb8bbd3c6f4a28d8354e5e99a91d4edde91c257 Mon Sep 17 00:00:00 2001 From: bridgte Date: Fri, 29 Mar 2024 16:24:49 +0100 Subject: [PATCH 03/12] positionnement des fleches --- assets/style.css | 6 ++++-- index.html | 6 +++++- 2 files changed, 9 insertions(+), 3 deletions(-) diff --git a/assets/style.css b/assets/style.css index ebec468b..37e219b4 100644 --- a/assets/style.css +++ b/assets/style.css @@ -127,10 +127,12 @@ header { position: absolute; } #banner .arrow_left { - left: 10px; + position: relative; + right: 580px; } #banner .arrow_right { - right: 10px; + position: relative; + left: 580px; } /* Gestion des points du carrousel */ .dots { diff --git a/index.html b/index.html index 15603943..67d777a7 100644 --- a/index.html +++ b/index.html @@ -20,7 +20,11 @@

From 30af9f3c37f10ece759d0302670295050084440b Mon Sep 17 00:00:00 2001 From: bridgte Date: Wed, 10 Apr 2024 18:43:14 +0200 Subject: [PATCH 04/12] bullet points --- assets/script.js | 49 ++++++++++++++++++++++++++++++++++++++++++++++++ assets/style.css | 2 -- index.html | 1 + 3 files changed, 50 insertions(+), 2 deletions(-) diff --git a/assets/script.js b/assets/script.js index 4fe57504..77bc4fc2 100644 --- a/assets/script.js +++ b/assets/script.js @@ -16,3 +16,52 @@ const slides = [ "tagLine":"Autocollants avec découpe laser sur mesure" } ] + +//eventlistener sur chacune des fleches du carrousel +let arrow_left = document.querySelector(".arrow_left") +let arrow_right = document.querySelector(".arrow_right") + +arrow_left.addEventListener("click",()=>{ + console.log(arrow_left) +}) + +arrow_right.addEventListener("click",()=>{ + console.log(arrow_right) +}) + +//Ajout des bullet points au slider + +let nombreDeBulletPoints = slides.length +console.log(nombreDeBulletPoints) + + +let ul = document.createElement("ul") +ul.classList.add("dot") +let dots = document.querySelector(".dots") + +dots.appendChild(ul) + +//fonction pour afficher autant de bullet point qu'il y a d'images dans le slider +for(let i=0; i < nombreDeBulletPoints; i++){ + let li = document.createElement("li") + let dot = document.querySelector(".dot") + dot.appendChild(li) + +} + +//activer le bullet point en cours de visionnage +let dot = document.querySelector(".dot") +for(let i = 0; i < slides.length; i++ ){ + const dotSelected = document.createElement("div") + dotSelected.classList.add("dot_selected") + dot.appendChild(dotSelected) + +} + +//affichage du carrousel +let imgCarrousel = slides.image +let i=0 +let index = slides[i] +imgCarrousel.src ="./assets/images/slideshow/" + slides[index].image +imgCarrousel.classList.add("activeImg") +console.log(imgCarrousel) diff --git a/assets/style.css b/assets/style.css index 37e219b4..24bfb6fe 100644 --- a/assets/style.css +++ b/assets/style.css @@ -53,9 +53,7 @@ table { border-collapse: collapse; border-spacing: 0; } -body { -} section { margin-block: 6em; } diff --git a/index.html b/index.html index 67d777a7..c57d0c4f 100644 --- a/index.html +++ b/index.html @@ -8,6 +8,7 @@ +
From 56a6bcdba165d95a60dc56bc6d2fdbe64ca4b3b6 Mon Sep 17 00:00:00 2001 From: bridgte Date: Sat, 13 Apr 2024 16:04:05 +0200 Subject: [PATCH 05/12] boucle du carousel --- assets/script.js | 117 +++++++++++++++++++++++++++++++++-------------- assets/style.css | 8 ++-- index.html | 2 +- 3 files changed, 87 insertions(+), 40 deletions(-) diff --git a/assets/script.js b/assets/script.js index 77bc4fc2..fe9d5562 100644 --- a/assets/script.js +++ b/assets/script.js @@ -1,67 +1,114 @@ const slides = [ { - "image":"slide1.jpg", - "tagLine":"Impressions tous formats en boutique et en ligne" + "image":"./assets/images/slideshow/slide1.jpg", + "tagLine":"Impressions tous formats en boutique et en ligne" }, { - "image":"slide2.jpg", - "tagLine":"Tirages haute définition grand format pour vos bureaux et events" + "image":"./assets/images/slideshow/slide2.jpg", + "tagLine":"Tirages haute définition grand format pour vos bureaux et events" }, { - "image":"slide3.jpg", - "tagLine":"Grand choix de couleurs de CMJN aux pantones" + "image":"./assets/images/slideshow/slide3.jpg", + "tagLine":"Grand choix de couleurs de CMJN aux pantones" }, { - "image":"slide4.png", - "tagLine":"Autocollants avec découpe laser sur mesure" + "image":"./assets/images/slideshow/slide4.png", + "tagLine":"Autocollants avec découpe laser sur mesure" } ] +//console.log(slides.tagLine[0]) + //eventlistener sur chacune des fleches du carrousel let arrow_left = document.querySelector(".arrow_left") let arrow_right = document.querySelector(".arrow_right") -arrow_left.addEventListener("click",()=>{ - console.log(arrow_left) -}) +//arrow_left.addEventListener("click",()=>{ +// console.log(arrow_left) +//}) -arrow_right.addEventListener("click",()=>{ - console.log(arrow_right) -}) +//arrow_right.addEventListener("click",()=>{ +// console.log(arrow_right) +//}) //Ajout des bullet points au slider -let nombreDeBulletPoints = slides.length -console.log(nombreDeBulletPoints) - - let ul = document.createElement("ul") -ul.classList.add("dot") +//ul.classList.add("dot") let dots = document.querySelector(".dots") dots.appendChild(ul) + + + +//définir l'index actuel du carousel +let currentIndex = 0 + +//Récupérer la div banner +let bannerDiv = document.getElementById("banner") + +//Récupérer l'image à l'intérieur de la div +let bannerImg = bannerDiv.getElementsByClassName("banner-img")[0] + +//Récupérer la balise p à l'intérieur de la div +let bannerText = bannerDiv.getElementsByTagName("p")[0] + + +//fonction permettant de mettre à jour le carousel +function carousel(){ +slides.forEach(slide => { + //mettre à jour l'image + bannerImg.src = slides[currentIndex].image + //mettre à jour le texte + bannerText.innerHTML = slides[currentIndex].tagLine + //passer à l'élément suivant + currentIndex = (currentIndex + 1) % slides.length +})} + //fonction pour afficher autant de bullet point qu'il y a d'images dans le slider -for(let i=0; i < nombreDeBulletPoints; i++){ +function createDots(){ +for(let i=0; i < slides.length; i++){ let li = document.createElement("li") let dot = document.querySelector(".dot") - dot.appendChild(li) - + ul.appendChild(li) + let div = document.querySelector(".dots") + div.classList.remove("dots") + ul.classList.add("dots") + li.classList.add("dot") +} + + +//Ajout du click sur la flèche de droite +arrow_right.addEventListener("click",() => { + currentIndex = (currentIndex + 1) % slides.length; + carousel() + }) + +//Ajout du click sur la flèche de gauche +arrow_left.addEventListener("click",() => { + currentIndex = (currentIndex - 1 + slides.length) % slides.length + carousel() +}) } +createDots() -//activer le bullet point en cours de visionnage -let dot = document.querySelector(".dot") -for(let i = 0; i < slides.length; i++ ){ - const dotSelected = document.createElement("div") - dotSelected.classList.add("dot_selected") - dot.appendChild(dotSelected) +//récupérer tous les bullet points +let li = document.querySelector("ul > li") +//fonction pour mettre à jour les bullet points +function upDateDots (){ + //parcourir tous les bullet points + for (let i=0; i - +
From 4fb10851de3666a69ccb052ccd4651d389053cbc Mon Sep 17 00:00:00 2001 From: bridgte Date: Sun, 14 Apr 2024 07:21:52 +0200 Subject: [PATCH 06/12] reorganisation et nettoyage du script --- assets/.DS_Store | Bin 0 -> 6148 bytes assets/script.js | 98 +++++++++++++++-------------------------------- assets/style.css | 8 ++-- index.html | 3 +- 4 files changed, 35 insertions(+), 74 deletions(-) create mode 100644 assets/.DS_Store diff --git a/assets/.DS_Store b/assets/.DS_Store new file mode 100644 index 0000000000000000000000000000000000000000..5008ddfcf53c02e82d7eee2e57c38e5672ef89f6 GIT binary patch literal 6148 zcmeH~Jr2S!425mzP>H1@V-^m;4Wg<&0T*E43hX&L&p$$qDprKhvt+--jT7}7np#A3 zem<@ulZcFPQ@L2!n>{z**++&mCkOWA81W14cNZlEfg7;MkzE(HCqgga^y>{tEnwC%0;vJ&^%eQ zLs35+`xjp>T0 avec découpe laser sur mesure" } -] - -//console.log(slides.tagLine[0]) +]; //eventlistener sur chacune des fleches du carrousel let arrow_left = document.querySelector(".arrow_left") let arrow_right = document.querySelector(".arrow_right") -//arrow_left.addEventListener("click",()=>{ -// console.log(arrow_left) -//}) - -//arrow_right.addEventListener("click",()=>{ -// console.log(arrow_right) -//}) - -//Ajout des bullet points au slider - -let ul = document.createElement("ul") -//ul.classList.add("dot") let dots = document.querySelector(".dots") -dots.appendChild(ul) - - - - //définir l'index actuel du carousel let currentIndex = 0 - -//Récupérer la div banner -let bannerDiv = document.getElementById("banner") - //Récupérer l'image à l'intérieur de la div -let bannerImg = bannerDiv.getElementsByClassName("banner-img")[0] - +let bannerImg = document.querySelector(".banner-img") //Récupérer la balise p à l'intérieur de la div -let bannerText = bannerDiv.getElementsByTagName("p")[0] - +let bannerText = document.querySelector("#banner p") +//tableau pour stocker les bullets points +let bulletPoints = [] //fonction permettant de mettre à jour le carousel function carousel(){ -slides.forEach(slide => { - //mettre à jour l'image bannerImg.src = slides[currentIndex].image - //mettre à jour le texte bannerText.innerHTML = slides[currentIndex].tagLine - //passer à l'élément suivant - currentIndex = (currentIndex + 1) % slides.length -})} + //Mettre à jours les dots + upDateDots() +} -//fonction pour afficher autant de bullet point qu'il y a d'images dans le slider function createDots(){ -for(let i=0; i < slides.length; i++){ - let li = document.createElement("li") - let dot = document.querySelector(".dot") - ul.appendChild(li) - let div = document.querySelector(".dots") - div.classList.remove("dots") - ul.classList.add("dots") - li.classList.add("dot") + let ul = document.createElement("ul") + ul.classList.add("dots") // Ajout de la classe dots à ul + dots.appendChild(ul) + + for(let i=0; i < slides.length; i++){ + let li = document.createElement("li") + ul.appendChild(li) + li.classList.add("dot") // Ajout de la classe dot à tous les li + //Ajout des bullets points au tableau + bulletPoints.push(li) + } } +function upDateDots (){ + for (let i=0; i < bulletPoints.length; i++){ + bulletPoints[i].classList.remove("dot_selected") + } + + bulletPoints[currentIndex].classList.add("dot_selected") +} -//Ajout du click sur la flèche de droite arrow_right.addEventListener("click",() => { currentIndex = (currentIndex + 1) % slides.length; carousel() - }) +}) -//Ajout du click sur la flèche de gauche arrow_left.addEventListener("click",() => { - currentIndex = (currentIndex - 1 + slides.length) % slides.length + currentIndex = (currentIndex - 1 + slides.length) % slides.length; carousel() }) -} -createDots() -//récupérer tous les bullet points -let li = document.querySelector("ul > li") - -//fonction pour mettre à jour les bullet points -function upDateDots (){ - //parcourir tous les bullet points - for (let i=0; i - +
@@ -129,6 +129,5 @@

Se rendre en boutique

- From 16657db79f40a9813f95e0f6f8feb1437a0d7e47 Mon Sep 17 00:00:00 2001 From: bridgte Date: Sun, 14 Apr 2024 09:15:19 +0200 Subject: [PATCH 07/12] correction des dernieres erreurs --- assets/script.js | 19 +++++++++++-------- 1 file changed, 11 insertions(+), 8 deletions(-) diff --git a/assets/script.js b/assets/script.js index 6042065a..09b435a7 100644 --- a/assets/script.js +++ b/assets/script.js @@ -30,7 +30,9 @@ let bannerImg = document.querySelector(".banner-img") //Récupérer la balise p à l'intérieur de la div let bannerText = document.querySelector("#banner p") //tableau pour stocker les bullets points -let bulletPoints = [] + + + //fonction permettant de mettre à jour le carousel function carousel(){ @@ -49,17 +51,18 @@ function createDots(){ let li = document.createElement("li") ul.appendChild(li) li.classList.add("dot") // Ajout de la classe dot à tous les li - //Ajout des bullets points au tableau - bulletPoints.push(li) } } function upDateDots (){ - for (let i=0; i < bulletPoints.length; i++){ - bulletPoints[i].classList.remove("dot_selected") - } - - bulletPoints[currentIndex].classList.add("dot_selected") + let allDot = document.querySelectorAll(".dot") + allDot.forEach((dot, index) => { + if (index === currentIndex) { + dot.classList.add("dot_selected") + } else { + dot.classList.remove("dot_selected") + } + }) } arrow_right.addEventListener("click",() => { From ca83158b6185467ea5b75d50a296b59fcc4e2001 Mon Sep 17 00:00:00 2001 From: bridgte Date: Sun, 14 Apr 2024 09:25:41 +0200 Subject: [PATCH 08/12] ajout des commentaires du code manquants --- assets/script.js | 21 ++++++++++++++++----- 1 file changed, 16 insertions(+), 5 deletions(-) diff --git a/assets/script.js b/assets/script.js index 09b435a7..58d601e8 100644 --- a/assets/script.js +++ b/assets/script.js @@ -20,9 +20,8 @@ const slides = [ //eventlistener sur chacune des fleches du carrousel let arrow_left = document.querySelector(".arrow_left") let arrow_right = document.querySelector(".arrow_right") - +//Récupérer le class dots let dots = document.querySelector(".dots") - //définir l'index actuel du carousel let currentIndex = 0 //Récupérer l'image à l'intérieur de la div @@ -36,26 +35,35 @@ let bannerText = document.querySelector("#banner p") //fonction permettant de mettre à jour le carousel function carousel(){ + //mettre à jour l'image bannerImg.src = slides[currentIndex].image + //mettre à jour le texte bannerText.innerHTML = slides[currentIndex].tagLine //Mettre à jours les dots upDateDots() } +//fonction créant les bullet points pour chaque image du carousel function createDots(){ + //création de la liste de bullet points let ul = document.createElement("ul") - ul.classList.add("dots") // Ajout de la classe dots à ul + // Ajout de la classe dots à ul + ul.classList.add("dots") dots.appendChild(ul) - + //boucle permettant de récupérer le nombre de bullet points à ajouter for(let i=0; i < slides.length; i++){ let li = document.createElement("li") ul.appendChild(li) - li.classList.add("dot") // Ajout de la classe dot à tous les li + // Ajout de la classe dot à tous les li + li.classList.add("dot") } } +//fonction permettant de mettre à jour les bullet points en fonction de l'image à l'écran function upDateDots (){ + // Récupérer toutes les class dot let allDot = document.querySelectorAll(".dot") + // Appliquer la class dol_selected au bon bullet point allDot.forEach((dot, index) => { if (index === currentIndex) { dot.classList.add("dot_selected") @@ -65,15 +73,18 @@ function upDateDots (){ }) } +//ajout du déclenchement de l'image suivant au click sur la flèche de droite arrow_right.addEventListener("click",() => { currentIndex = (currentIndex + 1) % slides.length; carousel() }) +//ajout du déclenchement de l'image suivant au click sur la flèche de gauche arrow_left.addEventListener("click",() => { currentIndex = (currentIndex - 1 + slides.length) % slides.length; carousel() }) +//Appeler les fonctions createDots() carousel() From 4d7aa9ac97a8e1be7b8c294e69e5d9474deb7298 Mon Sep 17 00:00:00 2001 From: bridgte Date: Sun, 14 Apr 2024 10:30:46 +0200 Subject: [PATCH 09/12] resolution conflit main to modif --- index.html | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/index.html b/index.html index eb6b4f25..bae5cb0b 100644 --- a/index.html +++ b/index.html @@ -21,7 +21,11 @@

From eb7bc4dc7619c87af0df4ec189d2e829c9da1785 Mon Sep 17 00:00:00 2001 From: bridgte Date: Sun, 14 Apr 2024 10:44:49 +0200 Subject: [PATCH 10/12] modif chemin script --- index.html | 2 +- assets/script.js => script.js | 0 2 files changed, 1 insertion(+), 1 deletion(-) rename assets/script.js => script.js (100%) diff --git a/index.html b/index.html index bae5cb0b..e771d7be 100644 --- a/index.html +++ b/index.html @@ -8,7 +8,7 @@ - +
diff --git a/assets/script.js b/script.js similarity index 100% rename from assets/script.js rename to script.js From 77aa56a1f8c353532cb34cdcc201648bc53e1b90 Mon Sep 17 00:00:00 2001 From: bridgte Date: Sun, 14 Apr 2024 10:48:25 +0200 Subject: [PATCH 11/12] modif script --- index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.html b/index.html index e771d7be..e022d96a 100644 --- a/index.html +++ b/index.html @@ -8,7 +8,7 @@ - +
From a4cc6ee2b7837f63a156e6439bf11638c0f2f62f Mon Sep 17 00:00:00 2001 From: bridgte Date: Sun, 14 Apr 2024 15:37:08 +0200 Subject: [PATCH 12/12] correction erreur de chargement --- script.js => assets/script.js | 0 index.html | 2 +- 2 files changed, 1 insertion(+), 1 deletion(-) rename script.js => assets/script.js (100%) diff --git a/script.js b/assets/script.js similarity index 100% rename from script.js rename to assets/script.js diff --git a/index.html b/index.html index e022d96a..f6b6cb98 100644 --- a/index.html +++ b/index.html @@ -8,7 +8,7 @@ - +