Discussion :

[kkt8]

Bonjour,

Je voudrais faire un slider pour naviguer dans des images.
Je suis vraiment débutante en html/techno web et je ne sais pas du tout comment m'y prendre.
J'ai trouvé un morceau de code qui marche très bien :

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
33
<!-- Slideshow container -->
		<div class="slideshow-container">
		  <!-- Full-width images with number and caption text -->
		  <div class="mySlides fade">
		    <div class="numbertext"></div>
		    <img src="img/1.png" style="width:100%">
		    <div class="text">Caption Text</div>
		  </div>
 
		  <div class="mySlides fade">
		    <div class="numbertext"></div>
		    <img src="img/2.png" style="width:100%">
		    <div class="text">Caption Two</div>
		  </div>
 
		  <div class="mySlides fade">
		    <div class="numbertext"></div>
		    <img src="img/3.png" 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>

Mais a priori je ne connais pas le nombre d'image que j'ai et je voudrais que ça puisse marcher tout seul sans changer le code même si j'ajoute une image.
Je voudrais donc boucler dans mon répertoire img sur tous les fichiers d'extension png.

Une idée de comment faire ?
Une piste ?

D'avance merci
Chris

[javatwister]

Bonjour,

Il faudrait que tu postes la partie javascript, surtout;

[kkt8]

oups ... pardon

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
<script>
var slideIndex = 1;
showSlides(slideIndex);
 
function plusSlides(n) {
  showSlides(slideIndex += n);
}
 
function currentSlide(n) {
  showSlides(slideIndex = n);
}
 
function showSlides(n) {
  var i;
  var slides = document.getElementsByClassName("mySlides");
  var dots = document.getElementsByClassName("dot");
  if (n > slides.length) {slideIndex = 1}    
  if (n < 1) {slideIndex = slides.length}
  for (i = 0; i < slides.length; i++) {
      slides[i].style.display = "none";  
  }
  for (i = 0; i < dots.length; i++) {
      dots[i].className = dots[i].className.replace(" active", "");
  }
  slides[slideIndex-1].style.display = "block";  
  dots[slideIndex-1].className += " active";
}
</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
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
93
94
95
/*-----slider-----*/
* {box-sizing:border-box}
 
/* Slideshow container */
.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
}
 
/* 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: 16px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}
 
/* Position the "next button" to the right */
.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) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}
 
/* 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}
}

[javatwister]

Ce que tu montres n'est pas un slider; c'est une galerie d'images.
Pour ce que tu demandes, tu vas avoir besoin d'un langage serveur, type php, pour avoir accès à ton répertoire et de faire un appel ajax depuis ta page; ce n'est pas "difficile" mais ça va te demander un peu de temps pour comprendre le système;
Avec ce code, de toute façon, tu ne "navigueras" pas dans tes images

[kkt8]

Merci pour ta réponse.
Ok pour le php, je suis plus à ça de nouveau !
Je vais chercher dans cette direction !