Discussion :

[superLKN]

Bonjour à tous,

J'ai un petit bug sur mon slider, c'est assez compliqué à expliquer mais en gros la première fois que je vais appuyer sur slide suivante ça va faire -1 et la première fois que je vais appuyer sur slide précédente ça va faire +1. Apres le premier clic tout marche bien. Pour moi c'est un problème dans mes methodes " imageSuivante() " et " imagePrecedente() " ligne 55 et 68 mais je ne vois pas comment le régler... Si quelqu'un à une solution je suis preneur, merci d'avance !

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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
 class Slider {
    constructor(i, time, timer, slide, playing, nextImg, prevImg, pause) {
        this.i = i;
        this.time = time;
        this.timer = timer;
        this.slide = slide;
        this.playing = playing;
        this.nextImg = document.getElementById("fleche-droite");
        this.prevImg = document.getElementById("fleche-gauche");
        this.pause = document.getElementById("bouton-pause");
        this.init();
    }
 
    init() {
        this.afficherSlide();
        this.changeImg();
        this.nextImg.addEventListener("click", this.imageSuivante.bind(this));
        this.prevImg.addEventListener("click", this.imagePrecedente.bind(this));
        this.register();
        this.pause.addEventListener("click", this.initPause);
    }
 
    afficherSlide() {
        this.slide[0] = {
            images: '/img/velo-lyon.jpg',
            texte: '<p class="text1"> Première étape : Cliquez sur la station de votre choix </>'
        }
        this.slide[1] = {
            'images': '/img/velo-lyon2.jpg',
            'texte': '<p class="text2"> Deuxième étape : Rentrez votre Nom et prénom dans le formulaire et cliquez sur Réserver </>'
        }
        this.slide[2] = {
            'images': '/img/velo-lyon3.jpg',
            'texte': '<p class="text3"> Troisième étape : Veuillez signer le formulaire </>'
        }
        this.slide[3] = {
            'images': '/img/velo-lyon4.jpg',
            'texte': '<p class="text4">Dernière étape : Appuyez sur Valider ! :) </>'
        }
    }
 
    changeImg() {
        document.slide.src = this.slide[this.i].images;
        document.getElementById("sliderText").innerHTML = this.slide[this.i].texte;
 
        if (this.i < this.slide.length - 1) {
            this.i++;
        } else {
            this.i = 0;
        }
 
        this.timer = setTimeout(this.changeImg.bind(this), this.time);
    }
 
    imageSuivante() {
        document.slide.src = this.slide[this.i].images;
        document.getElementById("sliderText").innerHTML = this.slide[this.i].texte;
        clearTimeout(this.timer);
 
        if (this.i == 3) {
            this.i = 0;
        } else {
            this.i++;
        }
         this.timer = setTimeout(this.changeImg.bind(this), this.time);
    }
 
    imagePrecedente() {
        document.slide.src = this.slide[this.i].images;
        document.getElementById("sliderText").innerHTML = this.slide[this.i].texte;
        clearTimeout(this.timer);
 
        if (this.i == 0) {
            this.i = 3;
        } else {
            this.i--;
        }
         this.timer = setTimeout(this.changeImg.bind(this), this.time);
    }
 
    pauseSlider() {
        this.pause.innerHTML = "▶";
        this.playing = false;
        clearTimeout(this.timer);
    }
 
    playSlider() {
        this.pause.innerHTML = "❚❚";
        this.playing = true;
        this.timer = setTimeout(this.changeImg.bind(this), this.time);
    }
 
    initPause() {
        if (slider.playing) {
            slider.pauseSlider();
        } else {
            slider.playSlider();
        }
    }
 
    register() {
        var that = this;
        window.addEventListener("keydown", function (e) {
            return that.touchesBouton(e);
        });
    }
 
    touchesBouton(e) {
        switch (e.keyCode) {
            case 39:
                this.imageSuivante();
                break;
            case 37:
                this.imagePrecedente();
                break;
        }
    }
}
 
let slider = new Slider(0, 5000, "", [], true);

Je vous met aussi le lien de mon site pour avoir un meilleur aperçu du bug, car je l'ai assez mal expliquer.

http://projet3.webagencycor.com/

[Watilin]

Le problème tient en deux choses :

• la méthode changeImg() fait doublon avec imageSuivante() ;
• la propriété i représente non pas l’état de la slide visible actuellement, mais de celle qui sera visible lors du prochain changement.

De fait, chaque fois que la méthode changeImg() est appelée (donc chaque fois qu’on laisse le timer s’écouler), i est positionnée sur la slide prévue précédemment prévue, indépendamment du bouton sur lequel on a cliqué.

Pour corriger ça, je te propose de supprimer la méthode changeImg() en la remplaçant par imageSuivante() dans les setTimeout(), puis de modifier les deux méthodes imageSuivante() et imagePrecedente() pour que i soit modifiée avant d’être prise en compte pour afficher la slide :

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
imageSuivante() {
    this.i++;
    if (this.i >= this.slide.length) {
        this.i = 0;
    }
 
    document.slide.src = this.slide[this.i].images;
    document.getElementById("sliderText").innerHTML = this.slide[this.i].texte;
 
    clearTimeout(this.timer);
    this.timer = setTimeout(this.imageSuivante.bind(this), this.time);
}
 
imagePrecedente() {
    this.i--;
    if (this.i < 0) {
        this.i = this.slide.length - 1;
    }
 
    document.slide.src = this.slide[this.i].images;
    document.getElementById("sliderText").innerHTML = this.slide[this.i].texte;
 
    clearTimeout(this.timer);
    this.timer = setTimeout(this.changeImg.bind(this), this.time);
}

[superLKN]

Merci beaucoup d'avoir pris le temps de me répondre, tout marche parfaitement maintenant!