Bonjour tout le monde,
J'ai un petit souci sur du code assez simple, mais je vois pas ou se trouve l'erreur.
en gros la fonction incrémente une seul fois et s'arrête, et je ne comprend pas pourquoi.
le code html =>
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 <div class="carousel_item"> <img src="https://placeimg.com/572/322/animals"> <div class="carousel_content"> <h2 class="carousel_title">My awesome article</h2> <p>Mewl for food at 4am chase mice. Scratch leg; meow for can opener to feed me purr when being pet nya nya nyan catasstrophe, fooled again thinking the dog likes me cough hairball on conveniently placed pants.</p> </div> <div class="nav_dots"> <div class="dot" id="dot1"></div> <div class="dot" id="dot2"></div> <div class="dot" id="dot3"></div> <div class="dot" id="dot4"></div> </div> <div class="precedent"><i class="fa-solid fa-chevron-left"></i></div> <div class="suivant"><i class="fa-solid fa-chevron-right"></i></div> </div>
le code CSS =>
Code CSS : 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 .carousel_container{ position:relative; width:100vw; height:100vh; } .carousel_item{ position:absolute; display: flex; flex-direction: column; align-items: center; text-align: center; justify-content: center; width: 100%; flex: 1 0 100vw; left: 0; top: 0; visibility: hidden; } .carousel_item img{ width: 100%; height: 100vh; object-fit: cover; } .carousel_content{ position: absolute; top: 35%; left:50%; transform: translate(-50%,-35%); background-color: rgba(0,0,0,0.6); width: 100%; height:auto; } .carousel_content h2{ width:70%; margin:1rem 0; } .carousel_content h2::first-letter{ font-size: 4rem; color: var(--border-color); } .carousel_content p{ width: 70%; text-align: center; margin: 1rem auto; font-family: var(--font-title); font-size:clamp(16px, 26px, calc( 26 / ( 1000 / 100) * 1vw)); } .carousel_content p::first-letter{ font-size: calc(1.625rem + 1rem); color:var(--border-color); } .nav_dots{ position: absolute; bottom: 32vh; z-index: 50; display: flex; align-items: center; left:50%; transform:translateX(-50%); } .dot{ width:0.8rem; height: 0.8rem; background-color: var(--font-color); margin: 0 0.75rem; border-radius: 50%; } .precedent{ font-size: 2.5rem; font-weight: bold; cursor: pointer; position: absolute; top: 35%; left:1vw; color: var(--font-color); transform:translateY(-35%); transition: color 0.3s ease-in; z-index: 2000; } .suivant{ font-size: 2.5rem; font-weight: bold; cursor: pointer; position: absolute; top: 35%; right:2vw; color: var(--font-color); transform:translateY(-35%); transition: color 0.3s ease-in; z-index: 2000; } .suivant:hover,.precedent:hover{ color:var(--border-color); } .suivant i,.precedent i{ font-size: 3rem; } .carousel_item.active{ visibility: visible; }
le code JS =>
J'ai manuellement mis la classe active au premier item ensuite ca devrait se faire automatiquement.
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 const chevronPrecedent = document.querySelector('.precedent'); const chevronSuivant = document.querySelector('.suivant'); const dots = document.querySelectorAll('.dot'); const itemSlider = document.querySelectorAll('.carousel_item'); let firstItem = 0; let nbrItem = itemSlider.length; function removeActive() { for(let i = 0; i < nbrItem; i++){ itemSlider[i].classList.remove('active'); } } chevronSuivant.addEventListener('click',() => { firstItem++; removeActive(); itemSlider[firstItem].classList.add('active'); }) chevronPrecedent.addEventListener('click',() => { firstItem--; removeActive(); itemSlider[firstItem].classList.add('active'); })
le premier suivant passe bien la classe active au 2e élément mais ensuite rien ne se passe il ne veut pas passer a la 2e comme si les clicks deviennent inopérant.
Merci
Partager