OpenClassrooms-Student-Center · bridgte · Mar 29, 2024 · Mar 29, 2024 · Mar 29, 2024 · Apr 10, 2024
diff --git a/assets/.DS_Store b/assets/.DS_Store
diff --git a/assets/script.js b/assets/script.js
@@ -1,18 +1,90 @@
 const slides = [
 	{
-		"image":"slide1.jpg",
-		"tagLine":"Impressions tous formats <span>en boutique et en ligne</span>"
+		"image":"./assets/images/slideshow/slide1.jpg",
+		"tagLine":"Impressions tous formats <span> en boutique et en ligne</span>"
 	},
 	{
-		"image":"slide2.jpg",
-		"tagLine":"Tirages haute définition grand format <span>pour vos bureaux et events</span>"
+		"image":"./assets/images/slideshow/slide2.jpg",
+		"tagLine":"Tirages haute définition grand format <span> pour vos bureaux et events</span>"
 	},
 	{
-		"image":"slide3.jpg",
-		"tagLine":"Grand choix de couleurs <span>de CMJN aux pantones</span>"
+		"image":"./assets/images/slideshow/slide3.jpg",
+		"tagLine":"Grand choix de couleurs <span> de CMJN aux pantones</span>"
 	},
 	{
-		"image":"slide4.png",
-		"tagLine":"Autocollants <span>avec découpe laser sur mesure</span>"
+		"image":"./assets/images/slideshow/slide4.png",
+		"tagLine":"Autocollants <span> avec découpe laser sur mesure</span>"
 	}
-]
+];
+
+//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
+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
+
+
+
+
+//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")
+	// 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)
+		// 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")
+		} else {
+			dot.classList.remove("dot_selected")
+		}
+	})
+}
+
+//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()
diff --git a/assets/style.css b/assets/style.css
@@ -53,9 +53,7 @@ table {
 	border-collapse: collapse;
 	border-spacing: 0;
 }
-body {
 
-}
 section {
 	margin-block: 6em;
 }
@@ -127,10 +125,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
@@ -8,6 +8,7 @@
 	<link rel="preconnect" href="https://fonts.googleapis.com">
 	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 	<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&family=Roboto+Slab:wght@400;900&display=swap" rel="stylesheet">
+	<script src="./assets/script.js" defer></script>
 </head>
 <body>
 <header class="container">
@@ -20,6 +21,11 @@ <h1>
 	<div id="banner">
 		<img class="banner-img" src="./assets/images/slideshow/slide1.jpg" alt="Banner Print-it">
 		<p>Impressions tous formats <span>en boutique et en ligne</span></p>
+		<!--ajout des flèches du carroussel-->
+		<div class="arrow">
+			<img class="arrow_left" src="./assets/images/arrow_left.png" alt="arrow left">
+			<img class="arrow_right" src="./assets/images/arrow_right.png" alt="arrow right">
+		</div>
 		<div class="dots">
 		</div>
 	</div>
@@ -123,6 +129,5 @@ <h3>Se rendre en boutique</h3>
 		<img class="footer-logo" src="./assets/images/logo.png" alt="Print it ! Impressions d'entreprises" >
 	</div>
 </footer>
-<script src="./assets/script.js"></script>
 </body>
 </html>