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>

**Peebels** · 23/08/2023, 08h50

Bonjour,

j'ai trouvé la première fois pour récupérer ma class je faisais un
let bannerImg = document.getElementsByClassName("slide-img");,
je l'ai changé par un
let bannerImg = document.querySelector(".slide-img");,
et cela marche mais je ne sais pas pourquoi cela ne marche pas en récupérant la class

**ASCIIDEFOND** · 23/08/2023, 09h50

getElementsByClassName renvoi un objet de type tableau, donc si tu veux l'utiliser la syntaxe sera document.getElementsByClassName("slide-img")[0].
Pour document.querySelector, il retournera le premier sélecteur correspondant à ".slide-img"

document.getElementsByClassName https://developer.mozilla.org/fr/doc...ntsByClassName
document.querySelector https://developer.mozilla.org/fr/doc.../querySelector

**Peebels** · 23/08/2023, 12h18

Merci pour l'aide.
Maintenant je m'attaque aux dots....

**Peebels** · 23/08/2023, 17h06

Je me demandais si avec la méthode innerHTML on pouvait intégrer des images comme avec le .src= ?

**ASCIIDEFOND** · 24/08/2023, 08h49

Tu peux créer un élément enfant avec innerHTML
ex. imageSlider.innerHTML = '<img class="slide-img" src="https://i.imgur.com/3rCW1xj.png" height="250">'.

Element.innerHTML https://developer.mozilla.org/fr/doc...ment/innerHTML

Ajouter un attribut ou modifier sa valeur
ex. imageSlider.setAttribute("src", "https://i.imgur.com/3rCW1xj.png");.

Element.setAttribute() https://developer.mozilla.org/fr/doc...t/setAttribute

**Peebels** · 24/08/2023, 09h20

ha merci beaucoup pour les liens. Je regarde cela.

Dysfonctionnement slider débutant

JavaScript

Discussions similaires

Partager

Partager