From 79fd960e4f193a05f45d035970d3c304f76b627c Mon Sep 17 00:00:00 2001 From: Melodie Date: Fri, 14 Feb 2025 12:57:20 +0100 Subject: [PATCH 1/9] =?UTF-8?q?Ajout=20fl=C3=A8ches=20banner?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 3 +++ 1 file changed, 3 insertions(+) diff --git a/index.html b/index.html index 8c07106a..d5f6d218 100644 --- a/index.html +++ b/index.html @@ -19,8 +19,11 @@

From 0416c827f6e2ebfea8b35e3a6b1c7748a165935a Mon Sep 17 00:00:00 2001 From: Melodie Date: Fri, 21 Feb 2025 12:41:39 +0100 Subject: [PATCH 2/9] Ajout dots banner --- index.html | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/index.html b/index.html index d5f6d218..4d66111b 100644 --- a/index.html +++ b/index.html @@ -22,9 +22,12 @@

Left arrow Right arrow

Impressions tous formats en boutique et en ligne

-
- -
+
    +
  • +
  • +
  • +
  • +
From 9064ba409289e104d6b32cfe61b7eba6f408f5a3 Mon Sep 17 00:00:00 2001 From: Melodie Date: Fri, 21 Feb 2025 13:59:22 +0100 Subject: [PATCH 3/9] =?UTF-8?q?Ajout=20clics=20sur=20fl=C3=A8ches=20banner?= =?UTF-8?q?s?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- assets/script.js | 13 +++++++++++++ index.html | 4 ++-- 2 files changed, 15 insertions(+), 2 deletions(-) diff --git a/assets/script.js b/assets/script.js index 4fe57504..0650ff0e 100644 --- a/assets/script.js +++ b/assets/script.js @@ -1,3 +1,16 @@ +const left_arrow = document.querySelector('#left_arrow') +const right_arrow = document.querySelector('#right_arrow') +left_arrow.addEventListener("click", () => { + console.log("Vous avez cliqué sur la flèche gauche") + }) +right_arrow.addEventListener("click", () => { + console.log("Vous avez cliqué sur la flèche droite") + }) + + + + + const slides = [ { "image":"slide1.jpg", diff --git a/index.html b/index.html index 4d66111b..335e16ba 100644 --- a/index.html +++ b/index.html @@ -19,8 +19,8 @@

From b481b62612987321b30f27b1b99b227f12a852cc Mon Sep 17 00:00:00 2001 From: Melodie Date: Fri, 21 Feb 2025 19:06:01 +0100 Subject: [PATCH 8/9] =?UTF-8?q?d=C3=A9filement=20ok=20fl=C3=A8che=20gauche?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- assets/script.js | 47 +++++++++++++++++++++++++++++++++-------------- assets/style.css | 2 -- 2 files changed, 33 insertions(+), 16 deletions(-) diff --git a/assets/script.js b/assets/script.js index 3a4ccebb..b47e2230 100644 --- a/assets/script.js +++ b/assets/script.js @@ -23,24 +23,43 @@ const slides = [ ] let index = 0 -let index2 = 4 rightArrow.addEventListener("click", () => { console.log("Vous avez cliqué sur la flèche droite") - index++ - console.log(index) - imageBanner.src = "./assets/images/slideshow/"+slides[index].image - texteBanner.innerHTML = slides[index].tagLine - dotsBanner[index].classList.add("dot_selected") - dotsBanner[index-1].classList.remove("dot_selected") + if (index < 3) { + index++ + dotsBanner[index].classList.add("dot_selected") + dotsBanner[index-1].classList.remove("dot_selected") + imageBanner.src = "./assets/images/slideshow/"+slides[index].image + texteBanner.innerHTML = slides[index].tagLine + console.log(index+" if") + }else{ + index = 0 + dotsBanner[3].classList.remove("dot_selected") + dotsBanner[0].classList.add("dot_selected") + imageBanner.src = "./assets/images/slideshow/"+slides[0].image + texteBanner.innerHTML = slides[0].tagLine + console.log(index+"else") + } }) + leftArrow.addEventListener("click", () => { console.log("Vous avez cliqué sur la flèche gauche") - index2-- - console.log(index2) - imageBanner.src = "./assets/images/slideshow/"+slides[index2].image - texteBanner.innerHTML = slides[index2].tagLine - dotsBanner[index].classList.remove("dot_selected") - dotsBanner[index2].classList.add("dot_selected") - dotsBanner[index2+1].classList.remove("dot_selected") + if (index2 > 0) { + index2-- + dotsBanner[index].classList.remove("dot_selected") + dotsBanner[index2].classList.add("dot_selected") + dotsBanner[index2+1].classList.remove("dot_selected") + imageBanner.src = "./assets/images/slideshow/"+slides[index2].image + texteBanner.innerHTML = slides[index2].tagLine + console.log(index2+" if") + } }) + + // + + // if(i < nbElements - 4) + // i++; + // else + // i = 0; + diff --git a/assets/style.css b/assets/style.css index ebec468b..a00a94e2 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; } From 2436e2a439413dd130a81243f381d6baf62a6df2 Mon Sep 17 00:00:00 2001 From: Melodie Date: Wed, 26 Feb 2025 09:02:20 +0100 Subject: [PATCH 9/9] =?UTF-8?q?d=C3=A9filement=20slides=20ok?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- assets/script.js | 40 ++++++++++++++++++---------------------- 1 file changed, 18 insertions(+), 22 deletions(-) diff --git a/assets/script.js b/assets/script.js index b47e2230..09a9806e 100644 --- a/assets/script.js +++ b/assets/script.js @@ -1,3 +1,5 @@ +// Gestion du slider + // Définition des variables pour les flèches gauche et droite, les images, le texte, les bullets points et les slides de la bannière : const leftArrow = document.querySelector('#left_arrow') const rightArrow = document.querySelector('#right_arrow') const imageBanner = document.querySelector(".banner-img") @@ -23,43 +25,37 @@ const slides = [ ] let index = 0 + + //fonction de défilement au clic de la flèche droite : rightArrow.addEventListener("click", () => { - console.log("Vous avez cliqué sur la flèche droite") if (index < 3) { index++ dotsBanner[index].classList.add("dot_selected") dotsBanner[index-1].classList.remove("dot_selected") imageBanner.src = "./assets/images/slideshow/"+slides[index].image - texteBanner.innerHTML = slides[index].tagLine - console.log(index+" if") + texteBanner.innerHTML = slides[index].tagLine }else{ index = 0 dotsBanner[3].classList.remove("dot_selected") dotsBanner[0].classList.add("dot_selected") imageBanner.src = "./assets/images/slideshow/"+slides[0].image texteBanner.innerHTML = slides[0].tagLine - console.log(index+"else") } }) + // fonction de défilement au clic de la flèche gauche : leftArrow.addEventListener("click", () => { - console.log("Vous avez cliqué sur la flèche gauche") - if (index2 > 0) { - index2-- - dotsBanner[index].classList.remove("dot_selected") - dotsBanner[index2].classList.add("dot_selected") - dotsBanner[index2+1].classList.remove("dot_selected") - imageBanner.src = "./assets/images/slideshow/"+slides[index2].image - texteBanner.innerHTML = slides[index2].tagLine - console.log(index2+" if") + if(index > 0){ + index -- + dotsBanner[index].classList.add("dot_selected") + dotsBanner[index+1].classList.remove("dot_selected") + imageBanner.src = "./assets/images/slideshow/"+slides[index].image + texteBanner.innerHTML = slides[index].tagLine + }else{ + index = 3 + dotsBanner[0].classList.remove("dot_selected") + dotsBanner[3].classList.add("dot_selected") + imageBanner.src = "./assets/images/slideshow/"+slides[3].image + texteBanner.innerHTML = slides[3].tagLine } }) - - - // - - // if(i < nbElements - 4) - // i++; - // else - // i = 0; -