From f1401518e6cae9c2bc81ebedc66c8b6baa4201ca Mon Sep 17 00:00:00 2001
From: Aavrahman <aiguernazene@gmail.com>
Date: Wed, 17 Jul 2024 14:08:39 +0200
Subject: [PATCH] integration fleches et dots, activation navigation avec les
 fleches, changements class des dots

---
 assets/carrousel.js | 43 +++++++++++++++++++++++++++++++++++++++++++
 assets/dots.js      | 24 ++++++++++++++++++++++++
 assets/script.js    | 18 +++++++++---------
 assets/style.css    |  5 +++++
 index.html          | 16 +++++++++++++---
 5 files changed, 94 insertions(+), 12 deletions(-)
 create mode 100644 assets/carrousel.js
 create mode 100644 assets/dots.js

diff --git a/assets/carrousel.js b/assets/carrousel.js
new file mode 100644
index 00000000..c7cc7ab1
--- /dev/null
+++ b/assets/carrousel.js
@@ -0,0 +1,43 @@
+/* Function Counter */
+
+counter.i = 0;
+function counter(arrow) {
+	if (arrow.className === "arrow_left") {
+		(counter.i === 0) ? (counter.i = 3) : counter.i--;
+	} else if(arrow.className === "arrow_right") {
+		(counter.i === 3) ? (counter.i = 0) : counter.i++;
+	}
+	return counter.i;
+}
+
+/** Function display image, tagline */
+function clickOnArrow(arrow) {
+	let banner = document.getElementById("the_banner");
+	let banner_tagLine = document.querySelector("#banner .arrow p");
+
+	/** Set the image index   */
+	let j = counter(arrow);
+
+	/**Toggle index and Display next/previous img  */
+	let imgSrc = "./assets/images/slideshow/" + slides[j].image;
+
+	/** Set image src and tagline index */
+	banner.setAttribute('src', imgSrc);
+	banner_tagLine.innerHTML = slides[j].tagLine;
+
+	switchSelectedDot(j);
+}
+
+
+/* Call to functions */
+
+let previousImg = document.querySelector('.arrow_left');
+previousImg.addEventListener('click', function () {
+	let x = clickOnArrow(previousImg);
+});
+
+let nextImg = document.querySelector('.arrow_right');
+nextImg.addEventListener('click', function () {
+	clickOnArrow(nextImg);
+});
+
diff --git a/assets/dots.js b/assets/dots.js
new file mode 100644
index 00000000..7fc36f1f
--- /dev/null
+++ b/assets/dots.js
@@ -0,0 +1,24 @@
+/** Display the dots */
+let container = document.querySelector("#banner .dots");
+let theDiv = "";
+for (let i = 0; i < slides.length; i++) {
+	if (i !== 0) {
+		theDiv += `<div id="` + i + `"class='dot'> </div>`;
+	} else if(i === 0) {
+		theDiv += `<div id="` + i + `"class='dot dot_selected'> </div>`;
+	}
+}
+container.innerHTML = theDiv;
+
+
+/** Function Toggle selected dot */
+function switchSelectedDot(acualImage) {
+	let dots = document.querySelector(".dots");
+	for (const child of dots.children) {
+		if (parseInt(child.id) === acualImage) {
+			child.classList.add("dot_selected");
+		} else if (parseInt(child.id) !== acualImage) {
+			child.classList.remove("dot_selected");
+		}
+	}
+}
\ No newline at end of file
diff --git a/assets/script.js b/assets/script.js
index 4fe57504..92663212 100644
--- a/assets/script.js
+++ b/assets/script.js
@@ -1,18 +1,18 @@
 const slides = [
 	{
-		"image":"slide1.jpg",
-		"tagLine":"Impressions tous formats <span>en boutique et en ligne</span>"
+		"image": "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": "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": "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": "slide4.png",
+		"tagLine": "Autocollants <span>avec découpe laser sur mesure</span>"
 	}
-]
+];
\ No newline at end of file
diff --git a/assets/style.css b/assets/style.css
index ebec468b..29147acd 100644
--- a/assets/style.css
+++ b/assets/style.css
@@ -124,6 +124,11 @@ header {
 /* Code CSS en prévision de l'ajout d'un carousel pour la bannière */
 /* Gestion des fleches du carrousel */
 #banner .arrow {
+	width: 100%;
+	display: flex;
+	justify-content: space-between;
+	padding-left: 10px;
+	padding-right: 10px;
 	position: absolute;
 }
 #banner .arrow_left {
diff --git a/index.html b/index.html
index 8c07106a..8ce9bd35 100644
--- a/index.html
+++ b/index.html
@@ -18,8 +18,15 @@ <h1>
 </header>
 <main>
 	<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>
+		<img id="the_banner" class="banner-img" src="./assets/images/slideshow/slide1.jpg" alt="Banner Print-it">
+
+		<div class="arrow">
+			<img class="arrow_left" src="assets/images/arrow_left.png" alt="arrow left">
+
+			<p>Impressions tous formats <span>en boutique et en ligne</span></p>
+
+			<img class="arrow_right" src="assets/images/arrow_right.png" alt="arrow right">
+		</div>
 		<div class="dots">
 		</div>
 	</div>
@@ -123,6 +130,9 @@ <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>
+
+<script src="./assets/script.js" ></script>
+<script src="./assets/carrousel.js"></script>
+<script src="./assets/dots.js"></script>
 </body>
 </html>