Discussion :

[Orazur]

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

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

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

pour plus de details voici les captures d'écrans

[bonjourajax]

Bonjour

Code css :

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

1
2
 
.slideshow-container {overflow:hidden}

[Orazur]

j'ai essayé avec le overflow:hidden ça ne marche pas