Carrousel qui ne défile pas

**sg2707** · 13/07/2023, 17h12

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

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
 <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 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
#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;
 
}

**mathieu** · 13/07/2023, 23h29

pouvez vous nous montrez une adresse où on peut voir le code complet en fonctionnement ?

**sg2707** · 14/07/2023, 02h44

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

**Archimède** · 14/07/2023, 13h24

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

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

**sg2707** · 14/07/2023, 16h07

Tout fonctionne à présent, merci!
Aurais-tu rapidement un conseil pour progresser en javascript?

**Archimède** · 14/07/2023, 17h15

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

Carrousel qui ne défile pas

JavaScript

Vue hybride

Discussions similaires

Partager

Partager