diff --git a/ReadMe.md b/ReadMe.md index 0cb318ae..f559d6e9 100644 --- a/ReadMe.md +++ b/ReadMe.md @@ -1 +1,4 @@ # Print-It WebSite v.1 + +lien vers le Projet 5: +https://stephanieet.github.io/Projet5-JS/ \ No newline at end of file diff --git a/assets/script.js b/assets/script.js index 4fe57504..a8745f8b 100644 --- a/assets/script.js +++ b/assets/script.js @@ -1,18 +1,82 @@ const slides = [ - { - "image":"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":"slide3.jpg", - "tagLine":"Grand choix de couleurs de CMJN aux pantones" - }, - { - "image":"slide4.png", - "tagLine":"Autocollants avec découpe laser sur mesure" - } -] + { + image: "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: "slide3.jpg", + tagLine: "Grand choix de couleurs de CMJN aux pantones", + }, + { + image: "slide4.png", + tagLine: "Autocollants avec découpe laser sur mesure", + }, +]; + +/*Ajout des Event Listeners sur les flèches*/ + +const arrowleft = document.querySelector(".arrow_left"); +arrowleft.addEventListener("click", slideLeft); + +const arrowright = document.querySelector(".arrow_right"); +arrowright.addEventListener("click", slideRight); + +/*Création des bulles points*/ +const dotsBullet = document.querySelector(".dots"); + +/* Boucle qui permet de rajouter un bullet point en fonction du nombre d'images*/ +for (let i = 0; i < slides.length; i++) { + const dot = document.createElement("div"); + dot.className = "dot"; + dotsBullet.appendChild(dot); +} + +const dotsCheck = document.querySelectorAll(".dot"); +const bannerImage = document.querySelector(".banner-img"); +const bannerText = document.querySelector("#banner p"); + +let positionImage = 0; +setClassAndImage(); + +function slideRight() { + console.log("Vous avez cliqué sur la flèche de droite"); + changeClass("remove"); + if (positionImage >= slides.length - 1) { + positionImage = 0; + } else { + positionImage++; + } + setClassAndImage(); +} + +function slideLeft() { + console.log("Vous avez cliqué sur la flèche de gauche"); + changeClass("remove"); + if (positionImage <= 0) { + positionImage = slides.length - 1; + } else { + positionImage--; + } + setClassAndImage(); +} + +function changeClass(action) { + if (action === "remove") { + dotsCheck[positionImage].classList.remove("dot_selected"); + } + if (action === "add") { + dotsCheck[positionImage].classList.add("dot_selected"); + } +} + +function setClassAndImage() { + changeClass("add"); + /*changement de l'image et du titre*/ + bannerImage.src = `./assets/images/slideshow/${slides[positionImage].image}`; + bannerText.innerHTML = slides[positionImage].tagLine; +} diff --git a/index.html b/index.html index 8c07106a..21d43d09 100644 --- a/index.html +++ b/index.html @@ -1,5 +1,6 @@ + @@ -7,122 +8,140 @@ - + + -
-

- -

- Devis -
-
-
+ + - + + \ No newline at end of file