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>
Et le CSS :
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>
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; }
Partager