Slider JS vanilla qui reste bloquer

**pitbac23** · 17/08/2022, 03h14

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 =>

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');
})

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

**mathieu** · 17/08/2022, 08h11

si vous bouclez sur les éléments de "carousel_item", le code html n'a pas l'air bien structuré.
dans votre exemple vous avez seulement 1 élément, comment placez vous le code html s'il y a un 2e élément ?

**pitbac23** · 17/08/2022, 11h25

Bonjour,
Je vous remercie pour votre réponse,

Je vous donne par exemple le code HTML pour plusieurs éléments.
Dans mon idée , cela ferait comme des cartes que j'empile et ou je joue avec l'opacity ou le visibilty en CSS pour les faire apparaitre.

Voici le code html plus complet que j'avais couper au premier post

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
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
<div class="carousel_container">
            <div class="carousel_item item1 active">
                <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"></div>
                    <div class="dot"></div>
                    <div class="dot"></div>
                    <div class="dot"></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>
            <div class="carousel_item item2">
                <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"></div>
                    <div class="dot"></div>
                    <div class="dot"></div>
                    <div class="dot"></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>
            <div class="carousel_item item3">
                <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"></div>
                    <div class="dot"></div>
                    <div class="dot"></div>
                    <div class="dot"></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>
            <div class="carousel_item item4">
                <img src="https://placeimg.com/572/322/tech">
                <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"></div>
                    <div class="dot"></div>
                    <div class="dot"></div>
                    <div class="dot"></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>
        </div>

Merci pour ton aide, cela fait que 2 mois que je me suis mis au front donc je risque d'avoir quelques erreurs de sémantique, soyez indulgent :-)

**mathieu** · 17/08/2022, 11h57

je n'avais pas compris que vous nous aviez montré un seul élément du carrousel parce qu'avec cette structure vous voyez que les points et les chevrons se répètent dans chaque élément.
ce n'est pas gênant pour comprendre d'où vient votre problème donc la 1re étape est d'afficher le contenu des variables dans la console pour voir ce qu'il se passe. dans votre cas, regardez ce que contient la variable "chevronPrecedent" console.log(chevronPrecedent);.

**pitbac23** · 17/08/2022, 23h14

Bon bah écoute tu m'as mis sur la bonne piste c'était tout ce qu'il me manquait, en effet ma sémantique html n'était pas bonne.
Je poste le bonne code en production qui va bien. car ca pourra certainement en aider d'autre.
et par la même occasion un petit slider avec le sytème de POINT actif.

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
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<section id="video_intro" class="video_intro">
    <div class="carousel_container">
      <div class="carousel_item storm active">
        <img src="img/storm_header.jpeg" alt="photos rue tornade" class="intro_img">
        <div class="intro_content">
          <div class="rectangle_intro_1"></div>
          <div class="rectangle_intro_2"></div>
          <div class="rectangle_intro_3"></div>
          <h1 id="tempete_title">La tempête arrive</h1>
          <p>Nul ne peut apprendre aux autres à se libérer s’il n’a pas commencé à se libérer lui-même</p>
          <div class="bouton_slider">
            <button id="btn1" class="slider_button" onclick="window.open('mov/intro.mp4')" ;>Storm</button>
          </div>
        </div>
      </div>
 
      <div class="carousel_item crash">
        <img src="img/dollar.webp" alt="photos billet dollar rouler" class="intro_img">
        <div class="intro_content">
          <div class="rectangle_intro_1"></div>
          <div class="rectangle_intro_2"></div>
          <div class="rectangle_intro_3"></div>
          <h1 id="crash_title">Le Crash de l'euro</h1>
          <p>Voyez ce que votre confiance envers les banques a donné, une catastrophe ...</p>
          <div class="bouton_slider">
            <button id="btn2" class="slider_button" onclick="window.open('mov/eco.mp4')" ;>Crash</button>
          </div>
        </div>
      </div>
      <div class="nav_dots">
        <div class="dot active"></div>
        <div class="dot"></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>
  </section>

le 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
.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;
    opacity: 0;
    visibility: hidden;
    transition: all 1s ease-in-out;
    z-index: 300;
}
 
.nav_dots{
    position: absolute;
    bottom: 25vh;
    z-index: 1000;
    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%;
    display: inline-block;
    transition: background-color 0.3s ease-in;
}
.precedent{
    font-size: 2.5rem;
    font-weight: bold;
    cursor: pointer;
    position: absolute;
    top: 35%;
    left:3vw;
    color: var(--font-color);
    transform:translateY(-35%);
    transition: color 0.3s ease-in;
    z-index: 500;
}
.suivant{
    font-size: 2.5rem;
    font-weight: bold;
    cursor: pointer;
    position: absolute;
    top: 35%;
    right:3vw;
    color: var(--font-color);
    transform:translateY(-35%);
    transition: color 0.3s ease-in;
    z-index: 501;
}
.suivant:hover,.precedent:hover{
    color:var(--border-color);
}
.suivant i,.precedent i{
    font-size: clamp(1rem,3rem,calc(48 / ( 1300 /100 )* 1vw));
}
.carousel_item.active{
    opacity:1;
    visibility: visible;    
}
.dot.active{
    background-color: var(--button-color);
    border: solid 3px var(--font-color); 
}

le JS =>

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
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')
        dots[i].classList.remove('active');
    }
}
 
 chevronSuivant.addEventListener('click',() => {
    firstItem++;
    if (firstItem >= nbrItem){
        firstItem = 0;
    }
    removeActive();
    itemSlider[firstItem].classList.add('active');
    dots[firstItem].classList.add('active');
})
chevronPrecedent.addEventListener('click',() => {
    firstItem--;
    if (firstItem < 0){
        firstItem = nbrItem - 1 ;
    }
    removeActive();
    itemSlider[firstItem].classList.add('active');
    dots[firstItem].classList.add('active');
})
 
setInterval(function(){
    firstItem++;
    if (firstItem >= nbrItem){
        firstItem = 0;
    }
    removeActive();
    itemSlider[firstItem].classList.add('active');
    dots[firstItem].classList.add('active');
},5000)

Un grand Merci de m'avoir orienté sur la bonne piste

**mathieu** · 18/08/2022, 00h12

à quoi correspondent les éléments "rectangle_intro_1" 2 et 3 ? peut-être qu'ils peuvent aussi être déplacés pour éviter le code redondant ?

**pitbac23** · 18/08/2022, 00h35

En fait ca correspond a des éléments décoratif pour les bordures
Le souci, si je le met pas relativement a carousel_item c'est qu'en fonction du texte la hauteur change et ils se positionnent mal et ça devient un casse tête avec les medias Query.
J'en conviens que c'est pas TOP du code redondant comme ça, si tu as une idée je suis preneur.
Je te met un screen pour que tu puisse visualisé.

https://ibb.co/cFPR7XT

**mathieu** · 18/08/2022, 06h37

c'est vrai que s'il faut rajouter 20 lignes de code pour ces 3 éléments, c'est un peu de la sur-optimisation et ils peuvent rester à cet endroit.
par contre s'il y a régulièrement des ajouts ou des modifications, l'évolution suivante serait de décrire les éléments du carrousel dans un tableau en php et de construire le code html en php.

Slider JS vanilla qui reste bloquer

JavaScript

Discussions similaires

Partager

Partager