Ajout flèches banner

assets/script.js

@@ -1,3 +1,10 @@
+// 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")
+const texteBanner = document.querySelector("#banner p")
+const dotsBanner = document.querySelectorAll(".dot")
 const slides = [
 	{
 		"image":"slide1.jpg",
@@ -16,3 +23,39 @@ const slides = [
 		"tagLine":"Autocollants <span>avec découpe laser sur mesure</span>"
 	}
 ]
+
+let index = 0
+
+	//fonction de défilement au clic de la flèche droite :
+rightArrow.addEventListener("click", () => {
+		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			
+		}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
+		}	
+	})
+
+	// fonction de défilement au clic de la flèche gauche :
+leftArrow.addEventListener("click", () => {
+		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
+		}
+	})

assets/style.css

@@ -53,9 +53,7 @@ table {
 	border-collapse: collapse;
 	border-spacing: 0;
 }
-body {
 
-}
 section {
 	margin-block: 6em;
 }

index.html

@@ -19,8 +19,14 @@ <h1>
 <main>
 	<div id="banner">
 		<img class="banner-img" src="./assets/images/slideshow/slide1.jpg" alt="Banner Print-it">
+		<img class="arrow arrow_left" src="./assets/images/arrow_left.png" alt ="Left arrow" id = "left_arrow">
+		<img class="arrow arrow_right" src="./assets/images/arrow_right.png" alt ="Right arrow" id = "right_arrow">
 		<p>Impressions tous formats <span>en boutique et en ligne</span></p>
 		<div class="dots">
+			<div class="dot dot_selected"></div>
+			<div class="dot"></div>
+			<div class="dot"></div>
+			<div class="dot"></div>				
 		</div>
 	</div>
 	<section id="about-us" class="container">