Bonjour,
J'ai réussi a faire un slider d'image avec une gestion de bouton précédent et suivant ....
Mais lors du chargement de la page mes images apparaissent mais il y a toute les images a la suite donc pour faire fonctionner le slider je suis obligé de cliquer sur une des fléches
donc je pense qu'il faut rajouter une fonction dans le js pour charger les images comme il faut.
Je me débrouille en html/css mais je débute en js
Merci d'avance
voici mon html
le CSS
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 <section class="slider_image"> <!-- Slideshow container --> <div class="slideshow-container"> <!-- Full-width images with number and caption text --> <div class="mySlides fade"> <img src="image_insertion/IMGP0973.JPG" style="width:100%"> <div class="text">Caption Text</div> </div> <div class="mySlides fade"> <img src="image_insertion/IMGP0996.JPG" style="width:100%"> <div class="text">Caption Two</div> </div> <div class="mySlides fade"> <img src="image_insertion/IMGP0999.JPG" style="width:100%"> <div class="text">Caption Three</div> </div> <div class="mySlides fade"> <img src="image_insertion/travaux.JPG" style="width:100%"> <div class="text">Caption Three</div> </div> <!-- Next and previous buttons --> <a class="prev" onclick="plusSlides(-1)">❮</a> <a class="next" onclick="plusSlides(1)">❯</a> </div> <br> <!-- The dots/circles --> <div style="text-align:center"> <span class="dot" onclick="currentSlide(1)"></span> <span class="dot" onclick="currentSlide(2)"></span> <span class="dot" onclick="currentSlide(3)"></span> </div> </section>
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 .slider_image { margin-top: 30px; } /* Slideshow container */ .slideshow-container { max-width: 500px; position: relative; margin: auto; margin-bottom: 150px; } /* Hide the images by default */ .mySlides { display: none; } /* Next & previous buttons */ .prev, .next { cursor: pointer; position: absolute; top: 50%; width: auto; margin-top: -22px; padding: 25px; color: white; font-weight: bold; font-size: 35px; transition: 0.6s ease; border-radius: 0 7px 7px 0; } /* Position the "next button" to the right */ .prev { left: 0; } .next { right: 0; border-radius: 3px 0 0 3px; } /* On hover, add a black background color with a little bit see-through */ .prev:hover, .next:hover { /*background-color: rgba(0,0,0,0.8);*/ } /* Caption text */ .text { color: #f2f2f2; font-size: 15px; padding: 8px 12px; position: absolute; bottom: 8px; width: 100%; text-align: center; } /* Number text (1/3 etc) */ /* The dots/bullets/indicators */ .dot { cursor: pointer; height: 15px; width: 15px; margin: 0 2px; background-color: #bbb; border-radius: 50%; display: inline-block; transition: background-color 0.6s ease; } .active, .dot:hover { background-color: #717171; } /* Fading animation */ .fade { -webkit-animation-name: fade; -webkit-animation-duration: 1.5s; animation-name: fade; animation-duration: 1.5s; } @-webkit-keyframes fade { from {opacity: .4} to {opacity: 1} } @keyframes fade { from {opacity: .4} to {opacity: 1} }
Et le javascript
pour plus de details voici les captures d'écrans
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 var slideIndex = 1; showSlides(slideIndex); // Next/previous controls function plusSlides(n) { showSlides(slideIndex += n); } // Thumbnail image controls function currentSlide(n) { showSlides(slideIndex = n); } function showSlides(n) { var i; var slides = document.getElementsByClassName("mySlides"); if (n > slides.length) {slideIndex = 1} if (n < 1) {slideIndex = slides.length} for (i = 0; i < slides.length; i++) { slides[i].style.display = "none"; } slides[slideIndex-1].style.display = "block"; }
![]()
Partager