Discussion :

[vaggarath]

Avant de venir vous embêter j'ai cherché et.... j'ai trouvé plein de trucs en fait, mais je n'y arrive pas. Je ne comprends pas.... I'm stupid^^

En gros j'ai fournis un code pour un slider. Après l'avoir changé un milliard de fois, j'ai finis par sortir un truc à priori pas trop dégueu. Le slider en question utilise deux arrays/tableaux, un pour les images et un second pour le sous texte des images. Les fonctions sont au nombre de trois : 1 Pour initier. Une qui incrémente et permet de passer à l'item suivant du tableau. Et la troisième qui fait l'inverse, à savoir décrémente et revient à la slide précédente.

Et dernier truc qu'on me demande serait de passer les tableaux en paramètres de mes fonctions. Et grosso merdo c'est là que j'ai commencé à saigner du nez... ^^

Si une âme charitable veut bien m'aider et m'expliquer comment faire je suis plus que preneur :p (ouais je suis gourmand, j'voudrais comprendre ce que je fais ^^)

Le code est ici : https://codepen.io/vaggarath/pen/WKBedP

[danielhagnoul]

Exemple d'Object Slider en ES2015 :

Code JavaScript :

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
<header>
    <img id="image1" />
    <div id="controle">
        <p id="prec">Précédent</p>
        <p id="suiv">suivant</p>
    </div>
    <div id="texte">
        <p></p>
    </div>
    <script>
        const
            suivant = document.querySelector('#suiv'),
            precedent = document.querySelector('#prec'),
            elemImg = document.querySelector('#image1'),
            elemTxt = document.querySelector('#texte'),
            Slider = {
                index: 0,
 
                arImg: [
                    'https://picsum.photos/200/300?image=0',
                    'https://picsum.photos/200/300?image=1',
                    'https://picsum.photos/200/300?image=2',
                    'https://picsum.photos/200/300?image=3',
                ],
 
                arTxt: [
                    "<p>texte 1</p>",
                    "<p>texte 2</p>",
                    "<p>texte 3</p>",
                    "<p>texte 4</p>",
                ],
 
                init() {
                    Slider.index = 0;
                    elemImg.src = Slider.arImg[Slider.index];
                    elemTxt.innerHTML = Slider.arTxt[Slider.index];
                },
 
                slideImg() {
                    if (Slider.index === 3) {
                        Slider.index = -1;
                    };
 
                    Slider.index++;
 
                    elemImg.src = Slider.arImg[Slider.index];
                    elemTxt.innerHTML = Slider.arTxt[Slider.index];
                },
 
                retour() {
                    if (Slider.index == 0) {
                        Slider.index = 4;
                    };
 
                    Slider.index--;
 
                    elemImg.src = Slider.arImg[Slider.index];
                    elemTxt.innerHTML = Slider.arTxt[Slider.index];
                },
            };
 
        Slider.init();
 
        suivant.addEventListener('click', function () {
            Slider.slideImg();
        })
 
        precedent.addEventListener('click', function () {
            Slider.retour();
        })
 
        function checkKeyPress(key) {
            if (key.keyCode == "37") { // flèche gauche
                Slider.retour();
            } else if (key.keyCode == "39") { // flèche droite
                Slider.slideImg();
            }
        }
 
        window.addEventListener('keydown', checkKeyPress, {
            capture: false,
            passive: true,
            once: false
        });
    </script>
</header>

[vaggarath]

Merci beaucoup

J'avais finis par trouver une solution +/- similaire mais en m'enquiquinant avec plus de lignes ! ^^

Merci encore^^