2 pièce(s) jointe(s)
Slider aligner les images
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
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
| <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> |
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
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
Code:
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";
} |
pour plus de details voici les captures d'écrans
Pièce jointe 385782Pièce jointe 385778
