Dysfonctionnement slider débutant

**Peebels** · 22/08/2023, 10h37

Bonjour,
je cherche a faire un petit slider et je m'entraine j'en suis au tout début
j'ai cela en html :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
<main>
        <div id="slider">
            <img class="slide-img" src="./assets/images/slideshow/slide1.jpg" >
 
            <img class="arrow arrow_left" src="assets/images/arrow_left.png" alt="Flêche de gauche" >
            <img class="arrow arrow_right" src="assets/images/arrow_right.png" alt="Flêche de droite" >

et j'ai cela en JAVASCRIPT

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
let imageSlider = document.getElementById("slider");
let bannerImg = document.getElementsByClassName("slide-img");
let arrowleft = document.querySelector(".arrow_left");
let arrowRight = document.querySelector(".arrow_right");
 
// ! IMAGES EN TABLEAUX
const slides = [
  {
    image: "slide1.jpg",
 
  },
  {
    image: "slide2.jpg",
 
  },
  {
    image: "slide3.jpg",
 
  },
  {
];
 
 
 
i = 0;
 
//! FLECHE CLIC GAUCHE
arrowleft.addEventListener("click", () => {
  console.log("A gauche");
 
    if (i <= 0) i = slides.length;
   i--;
 
  imageSlider.innerHTML =
    "<img class='slide-img' src='./assets/images/slideshow/'>" +
    slides[i].image;
});

j'ai bien ma première image affichée avec les flèches
Lorsque je clique sur la flèche gauche, ça déclenche bien une action mais je me retrouve avec un fond blanc avec écrit dessus Slide1.jpg.
Le chargement de l'image ne se fait pas. Et je vois pas mon erreur .
Si quelqu'un a une piste cela m'aiderai grandement.

**ASCIIDEFOND** · 22/08/2023, 12h57

Salut Peebels,

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<body>
    <div id="slider">
        <img id="slide-img" src="./assets/images/slideshow/slide1.jpg" height="250">
	<img class="arrow arrow_left" src="assets/images/arrow_left.png" alt="Flêche de gauche" >
	<img class="arrow arrow_right" src="assets/images/arrow_right.png" alt="Flêche de droite" > 
    </div>
 
    <script>
        const slides = ["slide1.jpg", "slide2.jpg", "slide3.jpg"]
        let imageSlider = document.getElementById("slider");
        let bannerImg = document.getElementById("slide-img");
        let arrowleft = document.querySelector(".arrow_left");
        let arrowRight = document.querySelector(".arrow_right");
        let i = 0
 
        arrowleft.addEventListener("click", () => {
            if (slides[i - 1]) {
                i-=1
            } else {
                i = slides.length - 1
            }
            bannerImg.src = `./assets/images/slideshow/${slides[i]}`
        })
 
        arrowRight.addEventListener("click", () => {
            if (slides[i + 1]) {
                i+=1
            } else {
                i = 0
            }
            bannerImg.src = `./assets/images/slideshow/${slides[i]}`
        })
    </script>
</body>

**Peebels** · 22/08/2023, 16h35

Merci mais hélas cela ne fonctionne pas par contre j'ai ajouté du texte en tagline et celui ci defile mais impossible d'avoir les images.

pour le javascript avec rajout de texte j'ai cela :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
const slides = [
  {
    image: "slide1.jpg",
    tagLine: "Slide1,"
  },
  {
    image: "slide2.jpg",
     tagLine: "Slide2",
  },
  {
    image: "slide3.jpg",
     tagLine: "Slide3",
  },
  {
    image: "slide4.png",
      tagLine: "Slide4",
  },
];

Et ma partie javascript ou j’essaie un peu tout par contre ma méthode de if est bonne et fonctionne, tout défile bien

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
arrowleft.addEventListener("click", () => {
  console.log("A gauche");
 
  if (i <= 0) i = slides.length;
  i--;
  bannerImg.src = "./assets/images/slideshow/${slides[i]}.image";
  text.innerHTML = slides[i].tagLine;
});

C'est juste ce lien qui ne fonctionne pas et même si je mets une image directe pour tester bannerImg.src = "./assets/images/slideshow/slider3.jpg";

**ASCIIDEFOND** · 22/08/2023, 16h46

J’ai testé le code avec d'autres images provenant de la toile et tout fonctionne.
Le problème doit être au niveau du chemin de tes images.
Que dit la console ?

**Peebels** · 22/08/2023, 17h39

Si je fais un console.log sur slides elles apparaissent.
si je vais sur le hmtl de la console le chemin est le bon pour la première image affichée.

Je vais refaire un truc à part avec ton code pour voir.

**ASCIIDEFOND** · 22/08/2023, 17h56

Voici le code avec les images que j'ai utilisées. Si ça peut aider ?

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<body>
    <div id="slider">
        <img id="slide-img" src="https://i.imgur.com/3rCW1xj.png" height="250">
	<img class="arrow arrow_left" src="assets/images/arrow_left.png" alt="Flêche de gauche" >
	<img class="arrow arrow_right" src="assets/images/arrow_right.png" alt="Flêche de droite" > 
    </div>
 
    <script>
        const slides = ["3rCW1xj.png", "AsXzjqX.png", "aJndu7X.png"]
        let imageSlider = document.getElementById("slider");
        let bannerImg = document.getElementById("slide-img");
        let arrowleft = document.querySelector(".arrow_left");
        let arrowRight = document.querySelector(".arrow_right");
        let i = 0
 
        arrowleft.addEventListener("click", () => {
            if (slides[i - 1]) {
                i-=1
            } else {
                i = slides.length - 1
            }
            bannerImg.src = `https://i.imgur.com/${slides[i]}`
        })
 
        arrowRight.addEventListener("click", () => {
            if (slides[i + 1]) {
                i+=1
            } else {
                i = 0
            }
            bannerImg.src = `https://i.imgur.com/${slides[i]}`
        })
    </script>
</body>

Dysfonctionnement slider débutant

JavaScript

Vue hybride

Discussions similaires

Partager

Partager