Carrousel qui ne défile pas

Version imprimable

Bonjour,
Je n'arrive pas à faire défiler vers la droite les images du carrousel.
Quelqu'un peut-il m'aider? Merci beaucoup.

Voici le code html:

Code:

1
2
3
4
5
6
7
 <!--CARROUSEL-->
 <div id="carrousel">
  <div id="containerSlides"></div>
  <a class="bouton" id="g">❮</a>
  <a class="bouton" id="d">❯</a>
 
 </div>

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
 <script type="text/javascript">
  document.body.onload=function(){
    nbr=5;
    p=0;
    containerSlides=document.getElementById("containerSlides");
    g=document.getElementById("g");
    d=document.getElementById("d");
    containerSlides.style.width=(300*nbr)+"px";
 
    for(i=1;i<=nbr;i++)
    {
      div=document.createElement("div");
      div.className="photo";
      div.style.backgroundImage="url('im"+i+".jpg')";
      containerSlides.appendChild(div);
    }
    afficherMasquer();
  }
  g.onclick=function(){
    if(p>-nbr+1)
      p--;
      containerSlides.style.transform="translate("+p*300+"px)";
      containerSlides.style.transition="all 0.5s ease";
 
    afficherMasquer();
  }
  d.onclick=function(){
    if(p<0)
      p++;
    containerSlides.style.transform="translate("+p*300+"px)";
    containerSlides.style.transition="all 0.5s ease";
    afficherMasquer();
 
  }
  function afficherMasquer()
  {
    if (p==-nbr+1)
    {
      g.style.visibility="visible";
    }
    else{
      g.style.visibility="hidden";
    }
    if(p=0)
    {
      d.style.visibility="hidden";
    }
    else{
      d.style.visibility="visible";
    }
  }
 </script>

Et le 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
#carrousel{
    width:300px;
    height:600px;
    overflow: hidden;
    position:relative;
 
}
 
#containerSlides{
    width:300px;
    height:600px;}
 
#g {
    left:0;
    position :absolute;
    cursor:pointer;
    top:300px;
    color:white;
    transform: translate(0,-50%);
    padding:16px;
    background: rgba(0,0,0,.3);
    border-radius: 0 3px 3px 0;
    transition:all .3s;
}
#d{
    right:0;
    position:absolute;
    cursor:pointer;
    top:300px;
    color:white;
    transform: translate(0,-50%);
    padding:16px;
    background: rgba(0,0,0,.3);
    transition:all .3s;
    border-radius: 3px 0 0 3px;
}
 
#g:hover {
    background: rgba(0,0,0,.6);
}
#d:hover {
    background: rgba(0,0,0,.6);
}
 
.photo{
    width:300px;
    height:600px;
    margin:0;
    display: inline-block;
    background-size: cover;
 
}

13/07/2023, 23h29
mathieu

pouvez vous nous montrez une adresse où on peut voir le code complet en fonctionnement ?
14/07/2023, 02h44
sg2707

Oui :
https://duban217.github.io/elevage/c...spoinbles.html (diapo en bas de page)

Tu te déplaces dans le mauvais sens pour ta translation...
Ceci devrait fonctionner...

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
<!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>
 
#carrousel{
    width:300px;
    height:600px;
    overflow: hidden;
    position:relative;
}
 
#containerSlides{
    width:300px;
    height:600px;
}
 
#g {
    left:0;
    position :absolute;
    cursor:pointer;
    top:300px;
    color:white;
    transform: translate(0,-50%);
    padding:16px;
    background: rgba(0,0,0,.3);
    border-radius: 0 3px 3px 0;
    transition:all .3s;
    user-select: none;
}
 
#d{
    right:0;
    position:absolute;
    cursor:pointer;
    top:300px;
    color:white;
    transform: translate(0,-50%);
    padding:16px;
    background: rgba(0,0,0,.3);
    transition:all .3s;
    border-radius: 3px 0 0 3px;
    user-select: none;
}
 
#g:hover {
    background: rgba(0,0,0,.6);
}
 
#d:hover {
    background: rgba(0,0,0,.6);
}
 
.photo{
    width:300px;
    height:600px;
    margin:0;
    display: inline-block;
    background-size: cover;
}
    </style>
</head>
<body>
     <!--CARROUSEL-->
 <div id="carrousel">
    <div id="containerSlides"></div>
        <a class="bouton" id="g">❮</a>
        <a class="bouton" id="d">❯</a>
 </div>
<script type="text/javascript">
    let nbr=4, p=0;
    document.body.onload=function(){
      containerSlides=document.getElementById("containerSlides");
      g=document.getElementById("g");
      d=document.getElementById("d");
      containerSlides.style.width=(300*nbr)+"px";
      //g.style.visibility="hidden";
 
 
     for (let i=1; i<=nbr; i++){
        let div=document.createElement("div");
        div.className="photo";
        div.style.backgroundImage="url('im"+i+".jpg')";
        containerSlides.appendChild( div );
      }
    }
 
    function translate(){
        containerSlides.style.transform="translate("+(-300*p)+"px)";
    }
 
    g.onclick=function(){
      if ( (p<=nbr) && (p>0) ) p--;
        translate();
        containerSlides.style.transition="all 0.5s ease";
        //p==0? (g.style.visibility="hidden",d.style.visibility="visible" ): (g.style.visibility="visible",d.style.visibility="visible"); 
    }
 
    d.onclick=function(){
      if( p<nbr-1) p++;
      translate();
      containerSlides.style.transition="all 0.5s ease";
      //p==nbr-1? (d.style.visibility="hidden" , g.style.visibility="visible"): (d.style.visibility="visible",g.style.visibility="visible");
    }
   </script>
</body>
</html>

14/07/2023, 16h07
sg2707

Tout fonctionne à présent, merci!
Aurais-tu rapidement un conseil pour progresser en javascript?
14/07/2023, 17h15
Archimède

Citation:

Envoyé par sg2707

Aurais-tu rapidement un conseil pour progresser en javascript?

Revois comment déclarer des variables et leur portée. (var, let...). J'en ai encore rectifié avec nbr et p... Les boucles, les conditions et après fais toi des petits programmes simples sur toutes les notions perfectibles pour toi avec des console.log() pour voir le résultat. Fais toi des dossiers sur chaque notion avec des fichiers d'exemples sur lesquels tu as travaillés ( ça permettra de te référer dessus en cas d'oubli) . Et puis évidemment les tutos, la fac et surtout pratiquer...
15/07/2023, 08h37
sg2707

Merci pour les conseils, et aussi pour le temps passé à relire le code.