Boucle dans du html

Version imprimable

Boucle dans du html

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:

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

22/02/2021, 11h46
javatwister

Bonjour,

Il faudrait que tu postes la partie javascript, surtout;

oups ... pardon

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

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

22/02/2021, 18h22
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 :)
23/02/2021, 08h18
kkt8

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