Slider JS vanilla qui reste bloquer
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:
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:
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 =>
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
| 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');
}) |
J'ai manuellement mis la classe active au premier item ensuite ca devrait se faire automatiquement.
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
