Skip to content

Commit

Permalink
défilement img
Browse files Browse the repository at this point in the history
  • Loading branch information
fatydm committed Mar 28, 2024
1 parent 79a7e9e commit 9485cb5
Show file tree
Hide file tree
Showing 11 changed files with 60 additions and 36 deletions.
Binary file modified .DS_Store
Binary file not shown.
Binary file modified assets/.DS_Store
Binary file not shown.
Binary file added assets/images/.DS_Store
Binary file not shown.
27 changes: 0 additions & 27 deletions assets/script.js

This file was deleted.

File renamed without changes
File renamed without changes
File renamed without changes
File renamed without changes
12 changes: 3 additions & 9 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -4,12 +4,12 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Print it ! - Impressions d'entreprise</title>
<link rel="stylesheet" href="./assets/style.css">
<link rel="stylesheet" href="./style.css">
<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="https://kit.fontawesome.com/0faa74c727.js" crossorigin="anonymous"></script>
<script src="script.js" defer></script>
<script src="./script.js" defer></script>
</head>
<body>
<header class="container">
Expand All @@ -21,14 +21,8 @@ <h1>
<main>
<div id="banner">
<img class="arrow arrow_left" src="./assets/images/arrow_left.png" alt="arrow-left">
<img class="banner-img" src="./assets/images/slideshow/slide1.jpg" alt="Banner Print-it">
<img class="banner-img" src="./assets/slideshow/slide1.jpg" alt="Banner Print-it">
<p>Impressions tous formats <span>en boutique et en ligne</span></p>
<img class="banner-img" src="./assets/images/slideshow/slide2.jpg" alt="">
<p>Tirages haute définition grand format <span>pour vos bureaux et events</span></p>
<img class="banner-img" src="./assets/images/slideshow/slide3.jpg" alt="Camaieu de couleur">
<p>Grand choix de couleurs <span>de CMJN aux pantones</span></p>
<img class="banner-img active" src="./assets/images/slideshow/slide4.png" alt="Emoji sur fond jaune">
<p>Autocollants <span>avec découpe laser sur mesure</span></p>
<img class="arrow arrow_right" src="./assets/images/arrow_right.png" alt="arrow-right">
<div class="dots">
<p class="dot dot_selected"></p><p class="dot"></p><p class="dot"></p><p class="dot"></p>
Expand Down
57 changes: 57 additions & 0 deletions script.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,57 @@
/* Tableau d'image : [ 0, 1, 2, 3] */

const slides = [
{
"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":"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>"
}
]

// Je récupère mes éléments
const bannerImg = document.querySelector('.banner-img');
const arrowLeft = document.querySelector('.arrow_left');
const arrowRight = document.querySelector('.arrow_right');
const mesSlides = slides.length;
const dots = document.querySelectorAll('.dot');
// L'indice d'un tableau commence toujours à 0
let i = 0;

// Gestionnaire d'événement clic gauche
arrowLeft.addEventListener("click", function () {
i--;
if (i === -1) {
i = mesSlides -1
}
bannerImg.src = "./assets/slideshow/" + slides[i].image
})

// Gestionnaire d'événement clic droit
arrowRight.addEventListener("click", function () {
i++;
if (i === mesSlides) {
i = 0
}
bannerImg.src = "./assets/slideshow/" + slides[i].image

})

/* Fonction points d'indicateur
function dots () {
for (let indicateur = 0; index < slides.length; indicateur+++) {
const dot = document.createElement("div");
dot.setAttribute("class", "dot");
dots.appendChild(dot);
}
}*/
File renamed without changes.

0 comments on commit 9485cb5

Please sign in to comment.