Gestion de mes dots

Version imprimable

24/08/2023, 18h32
Peebels

Gestion de mes dots
Je suis sur la gestion de mes dots, et je vois ce que je veux faire mais je n'arrive à déterminer quels éléments il me faut :
Je veux créer une fonction avec foreach et dire que pour chaque dot de dots on applique un remove de la class dot_selected, cela fonctionne aucune dot n'est affecté à cette class.

et ensuite je voudrais dire pour si l'index de ma dot est égale à ma slide en cours ajouté la class dot_selected.
Mais je m'y perds. Faut il déclarer une dot courante et comment déclarer ma slide en cours.

j'ai écrit ceci :
Code:

1 2 3 4 5 6 7 function ActiveDot() { dots.forEach((dot, index) => { dot.classList.remove("dot_selected"); // if (index === ) { // dot.classList.add("dot_selected"); // } });
24/08/2023, 20h09
ASCIIDEFOND

Désolé mais là je suis un peu perdu, que doit faire ton code. Est-il en rapport avec ton slider et un tableau ?
25/08/2023, 06h33
Peebels

oui en fait je veux mettre des dots indicators sur mes slides en tableau elles auront la même class dot ( un rond avec bordure et vide à l'intérieur) et je voulais que pour la slide en cours la dots change de class dot_selected (rond plein)
j'ai réussi par le code d'avant de mettre toutes mes dots avec la class dot. mais je n'arrive pas à mettre la class dot_selected pour la slide en cours

Un carrousel qui ressemblerait un peu à ça ?

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
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
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
        }
 
        .container {
            position: relative;
            margin: 1em auto .5em auto;
            max-width: 600px;
        }
 
        .container img {
            border-radius: .5em;
        }
 
        .hidden {
            display: none;
        }
 
        .visible {
            display: block;
        }
 
        .arrow {
            display: inline;
        }
 
        .prev,
        .arrow {
            cursor: pointer;
            position: absolute;
            top: 50%;
            width: auto;
            margin: -1.5em .3em 0 .3em;
            padding: 1em;
            color: white;
            font-weight: bold;
            font-size: 1.2em;
            transition: 0.3s ease;
            border-radius: .5em;
            user-select: none;
            background-color: rgba(204, 204, 204, 0.3);
        }
 
        .next {
            right: 0;
        }
 
        .prev:hover,
        .next:hover {
            box-shadow: 0 0 5px #fff;
            border: 1px solid #fff;
        }
 
        #nombre-dots {
            text-align: center;
            position: absolute;
            bottom: 1em;
            left: 32%;
 
        }
 
        .dot {
            cursor: pointer;
            height: 12px;
            width: 12px;
            margin: 0 10px;
            background-color: white;
            border-radius: 50%;
            display: inline-block;
        }
 
        .dot:hover,
        .active {
            transform: scale(1.5);
            transition: transform .2s;
        }
 
        .dot:hover {
            box-shadow: 0 0 5px #fff;
        }
    </style>
</head>
 
<body>
    <div class="container">
        <div>
            <img src="" class="carrousel-img" height="420" width="600">
        </div>
 
        <a class="prev arrow">❮</a>
        <a class="next arrow">❯</a>
 
        <div id="nombre-dots">
        </div>
    </div>
 
    <script>
        const slides = ["3rCW1xj.png", "AsXzjqX.png", "aJndu7X.png", "gVx56OF.png", "gqBG7EK.png", "P9IVqkS.png", "T1kCd0H.png"]
        let arrowleft = document.querySelector(".prev"),
            arrowRight = document.querySelector(".next"),
            bannerImg = document.getElementsByClassName("carrousel-img")[0],
            i = 0,
            baliseSpan = ""
 
        // création des dots
        for (let nbdot of slides) {
            baliseSpan += '<span class="dot"></span>'
        }
 
        document.getElementById('nombre-dots').innerHTML = baliseSpan
        let dots = document.querySelectorAll('.dot')
        dots[i].classList.add('active')
        bannerImg.src = `https://i.imgur.com/${slides[i]}`
 
 
        function actualisation() {
            for (let dot of dots) {
                dot.classList.remove('active')
            }
            bannerImg.src = `https://i.imgur.com/${slides[i]}`
           dots[i].classList.add('active');
        }
 
        arrowleft.addEventListener("click", () => {
            slides[i - 1] ? i -= 1 : i = slides.length - 1
            actualisation()
        })
 
        arrowRight.addEventListener("click", () => {
            slides[i + 1] ? i += 1 : i = 0
            actualisation()
        })
 
        // Dot position
        dots.forEach((dot, dotPosition) => {
            dot.addEventListener("click", () => {
                i = dotPosition
                actualisation()
            })
        })
    </script>
</body>
 
</html>

ha merci mais j'ai réussi pour les dots avec ce code
Code:

1 2 3 4 5 6 7 for (let i = 0; i < dots.length; i++) { if (i === visibleSlide) { dots[i].classList.add("dot_selected"); } else { dots[i].classList.remove("dot_selected"); } }
Merci pour la fonction avec foreach je n'arrivai pas à trouver