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