Dysfonctionnement slider débutant

Version imprimable

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:

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:

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.

Salut Peebels,

Code:

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>

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:

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:

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";

22/08/2023, 16h46
ASCIIDEFOND

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 ?
22/08/2023, 17h39
Peebels

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.

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

Code:

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>

23/08/2023, 08h50
Peebels

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
23/08/2023, 09h50
ASCIIDEFOND

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
23/08/2023, 12h18
Peebels

Merci pour l'aide.
Maintenant je m'attaque aux dots....
23/08/2023, 17h06
Peebels

Je me demandais si avec la méthode innerHTML on pouvait intégrer des images comme avec le .src= ?
24/08/2023, 08h49
ASCIIDEFOND

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
24/08/2023, 09h20
Peebels

ha merci beaucoup pour les liens. Je regarde cela.