Aleatoire sur un slideshow JS

Version imprimable

Salutations,

sur un slideshow HTML/JS qui semble bien fonctionner, je cherche à faire en sorte qu'il puise de façon ALEATOIRE dans le container, et non pas les uns après les autres comme actuellement.

Je suis une grosse quiche en JS.

Voici un bout de code actuel :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
<div class="slideshow-container">
	<div class="mySlides fade">
		<img src="../pict/Slide/Slide_BOLEX_Paillard_18_5-1961.jpg" style="width:100%">
		<div class="text">Projecteur BOLEX Paillard 18-5 (8mm) de 1961</div>
	</div>
	<div class="mySlides fade">
		<a href="https://youtu.be/9vxkCvYYS_k" target="_blank" rel="noreferrer">
			<img src="../pict/Slide/Slide_CNJV_BNF-2017.jpg" title="Colloque BNF de 2017" style="width:100%">
		</a>
		<div class="text">Colloque BNF de 2017</div>
	</div>
</div>

Et :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<script>
	var slideIndex = 0;
	showSlides();
 
	function showSlides() {
		var i;
		var slides = document.getElementsByClassName("mySlides");
		var dots = document.getElementsByClassName("dot");
		for (i = 0; i < slides.length; i++) {
			slides[i].style.display = "none";
		}
		slideIndex++;
		if (slideIndex > slides.length) {slideIndex = 1}
		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";
		setTimeout(showSlides, 2000); // Change image every 2 seconds
	}
</script>

Avez-vous une idée de comment m(y prendre ?

Merci de votre aide ...

18/12/2020, 09h18
SpaceFrog
le choix de la diapo qui s'affiche se fait à ce niveau là :
Code:

1 2 slides[slideIndex-1].style.display = "block";
sur l'array slides
Il suffirait de faire un shuffle juste avant...
18/12/2020, 16h52
Casio

Citation:

Envoyé par SpaceFrog

(...)

sur l'array slides
Il suffirait de faire un shuffle juste avant...

Je ne connais pas Js, quelle est la formule ? shuffle(array) ?
Je ne trouve pas sur le net de tuto.

Il semble qu'il faille définir une fonction Shuffle.
19/12/2020, 09h43
NoSmoking

Bonjour,
shuffle = « mélanger » dans la langue de la grenouille de l'espace ;)
19/12/2020, 10h31
Casio

On est d'accord. :)

Mais je ne connais pas la nomenclature.
19/12/2020, 18h04
NoSmoking

Citation:

Mais je ne connais pas la nomenclature.

:koi: si tu parles de la liste des images tu peux toujours la faire après chargement.

Il faudrait quand même savoir ce que tu souhaites à savoir faire un slide aléatoire ou mettre les images de façon aléatoire au départ et faire avec ?
19/12/2020, 18h26
Casio

Voici la page en question : https://wda-fr.org

J'aimerai que les images se chargent aléatoirement.
19/12/2020, 18h27
javatwister

Ce qui est sûr, c'est que tu n'as besoin que d'une image dans ton container...
19/12/2020, 18h37
Casio

Certainement.

Quelle est la nomenclature pour ce random ?

Citation:

J'aimerai que les images se chargent aléatoirement.

je pense que tu veux dire qu'elles s'affichent aléatoirement car on ne maitrise pas l'ordre de chargement des images.

Tu pourrais également le faire côté serveur, je parle du tri, car j'ai vu que cela provenait d'un fichier inclus

Code:

Ceci étant, si l'on considère que l'on traite cela côté client, donc en JavaScript on pourrait faire de la sorte.

• Récupérations des éléments concernés, ta nomenclature en fait

Code:

1
2
3
// récup. éléments utiles
const slideParent = document.querySelector(".slideshow-container");
const swapChildren = slideParent.querySelectorAll(".mySlides");

• Récupération d'un ordre aléatoire

Code:

1
2
// récup. un random d'affichage
const ordreTri = getRandomOrder(swapChildren.length);

... on verra la fonction de « mélange » après

• Changement de l'ordre d'affichage en déplaçant les éléments en fin de conteneur

Code:

1
2
3
4
5
6
7
8
9
// change l'ordre d'affichage
// Attention : il faut travailler avec une NodeList statique
// et non une HTMLCollection via getElementsByClassName()
ordreTri.forEach((ind) => {
  // juste pour voir
  swapChildren[ind].classList.add("pos-" + ind);
  // déplacement en fin de l'élément
  slideParent.appendChild(swapChildren[ind]);
});

... voilà qui est fait les éléments sont mélangés, on pourrait faire différemment mais ce serait une autre approche entre NodeList et HTMLCollection.

• Concernant la fonction de récupération d'un ordre aléatoire, j'utilise

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
function getRandomOrder(nbr) {
  const tabResult = [];
  // tableau contenant les numéro des cases
  const tabInitial = [];
  for (let i = 0; i < nbr; i += 1) {
    tabInitial[i] = i;
  }
  //[ES6] const tabInitial = new Array(nbr).fill(0).map((el, ind) => ind);
  // tirage au sort
  let ind;
  for (let i = 0; i < nbr; i += 1) {
    ind = Math.floor(Math.random() * tabInitial.length);
    // sauve la valeur de la colonne
    tabResult.push(tabInitial[ind]);
    // supprime élément pour nouveau tirage unique
    tabInitial.splice(ind, 1);
  }
  return tabResult;
}

... qui m'est suffisante et qui marche bien.

• Parlons de ta fonction d'affichage du slide, celle-ci pourrait être « simplifiée » comme ci dessous :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
// Attention : il faut récupèrer de nouveau les éléments
// l'ordre de la liste sera différent de la 1st
const slideChildren = slideParent.querySelectorAll(".mySlides");
const dotElements  = document.querySelectorAll(".dot");
// on se place en fin de slide
let slideIndex = slideChildren.length - 1;
// lancement du défilement
showSlides();
 
function showSlides() {
  // on masque
  slideChildren[slideIndex].style.display = "none";
  dotElements[slideIndex].classList.remove("active");
  // on incrémente et limite
  slideIndex += 1;
  slideIndex %= slideChildren.length;
  // on affiche
  slideChildren[slideIndex].style.display = "block";
  dotElements[slideIndex].classList.add("active");
  // on relance
  setTimeout(showSlides, 2000);
}

En mettant bout à bout ces codes cela devrait être fonctionnel.

Code complet :

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
function getRandomOrder(nbr) {
  const tabResult = [];
  // tableau contenant les numéro des cases
  const tabInitial = [];
  for (let i = 0; i < nbr; i += 1) {
    tabInitial[i] = i;
  }
  //[ES6] const tabInitial = new Array(nbr).fill(0).map((el, ind) => ind);
  // tirage au sort
  let ind;
  for (let i = 0; i < nbr; i += 1) {
    ind = Math.floor(Math.random() * tabInitial.length);
    // sauve la valeur de la colonne
    tabResult.push(tabInitial[ind]);
    // supprime élément pour nouveau tirage unique
    tabInitial.splice(ind, 1);
  }
  return tabResult;
}
// récup. éléments utiles
const slideParent = document.querySelector(".slideshow-container");
const swapChildren = slideParent.querySelectorAll(".mySlides");
 
// récup. un random d'affichage
const ordreTri = getRandomOrder(swapChildren.length);
// change l'ordre d'affichage
// Attention : il faut travailler avec une NodeList statique
// et non une HTMLCollection via getElementsByClassName()
ordreTri.forEach((ind) => {
  // juste pour voir
  swapChildren[ind].classList.add("pos-" + ind);
  // déplacement en fin de l'élément
  slideParent.appendChild(swapChildren[ind]);
});
// Attention : il faut récupèrer de nouveau les éléments
// l'ordre de la liste sera différent de la 1st
const slideChildren = slideParent.querySelectorAll(".mySlides");
const dotElements  = document.querySelectorAll(".dot");
// on se place en fin de slide
let slideIndex = slideChildren.length - 1;
// lancement du défilement
showSlides();
 
function showSlides() {
  // on masque
  slideChildren[slideIndex].style.display = "none";
  dotElements[slideIndex].classList.remove("active");
  // on incrémente et limite
  slideIndex += 1;
  slideIndex %= slideChildren.length;
  // on affiche
  slideChildren[slideIndex].style.display = "block";
  dotElements[slideIndex].classList.add("active");
  // on relance
  setTimeout(showSlides, 2000);
}

... ne pas hésiter à lire les commentaires ;)

Remarques générales :

• Le slide étant continu setTimeout pourrait être remplacé par un setInterval.

• La structure HTML pourrait avantageusement devenir par exemple :

Code:

1
2
3
4
<figure class="mySlides fade">
  <img src="../pict/Slide/Slide_Bull-D-2009.jpg" title="Carte BULL-D des annees 1970">
  <figcaption class="text">Carte BULL-D des ann&eacute;es 1970</figcaption>
</figure>

• La classe fade ne peut pas être animée, la propriété display n'est pas candidate au transition.

• Le diaporama pourrait être fait en CSS, voir : Diaporama avec effet fade in/out, (auto pub)

Voilà bon dimanche ;)

Citation:

Envoyé par NoSmoking

(...)
Code complet :
(...)

NICKEL, ce la fonctionne très bien : https://wda-fr.org
MERCI ;)

Citation:

Envoyé par NoSmoking

(...)
Remarques générales :

• Le slide étant continu setTimeout pourrait être remplacé par un setInterval.

Par contre,
Code:

1 2 3 (...) // on relance setInterval(showSlides, 2000);
Donne un truc saccadé et moche.

Pour :
Citation:
• La structure HTML pourrait avantageusement devenir par exemple :
Code:

1 2 3 4 <figure class="mySlides fade"> <img src="../pict/Slide/Slide_Bull-D-2009.jpg" title="Carte BULL-D des annees 1970"> <figcaption class="text">Carte BULL-D des années 1970</figcaption> </figure>
Je l'intègre comment ?

• Lorsque l'on utilise setInterval, on ne relance pas on fait appel une seule fois à setInterval, cela donne :

Code:

1
2
3
4
5
6
// on se place en fin de slide
let slideIndex = slideChildren.length - 1;
// lancement du défilement
setInterval(showSlides, 2000);
// pour affichage immédiat
showSlides();

... et dans la fonction showSlides on supprime le setTimeout qui devient inutile :

Code:

1
2
// on relance
//  setTimeout(showSlides, 2000);

• Pour l'intégration, il suffit de remplacer le nom des balises ce qui donne, sauf erreur :

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
<div class="slideshow-container">
  <figure class="mySlides fade">
    <img src="../pict/Slide/Slide_CNJV_BNF-2017.jpg" title="Colloque BNF de 2017">
    <figcaption class="text">Colloque BNF de 2017</figcaption>
  </figure>
  <figure class="mySlides fade">
    <img src="../pict/Slide/Slide_HP_85-2007.jpg" title="Petit ordinateur du bureau HP 85 de 1980">
    <figcaption class="text">Petit ordinateur du bureau HP 85 de 1980</figcaption>
  </figure>
  <figure class="mySlides fade">
    <img src="../pict/Slide/Slide_Bi-Bop_Silverlink_2000-2007.jpg" title="Bi-Bop Silverlink 2000 de 1991">
    <figcaption class="text">Bi-Bop Silverlink 2000 de 1991</figcaption>
  </figure>
  <figure class="mySlides fade">
    <img src="../pict/Slide/Slide_Zenith_Z89-2017.jpg" title="Ordinateur personnel Zenith Z-89 de 1979">
    <figcaption class="text">Ordinateur personnel Zenith Z-89 de 1979</figcaption>
  </figure>
  <figure class="mySlides fade">
    <img src="../pict/Slide/Slide_tore_ferrite.jpg" title="Tore de ferrite des annees 1970">
    <figcaption class="text">Tore de ferrite des ann&eacute;es 1970</figcaption>
  </figure>
  <figure class="mySlides fade">
    <img src="../pict/Slide/Slide_Atari_Falcon_030-2007.jpg" title="Ordinateur personnel Atari Falcon 030 de 1992">
    <figcaption class="text">Ordinateur personnel Atari Falcon 030 de 1992</figcaption>
  </figure>
  <figure class="mySlides fade">
    <img src="../pict/Slide/Slide_Jouques-2020.jpg" title="Atelier PACA de la WDA en 2020">
    <figcaption class="text">Atelier PACA de la WDA en 2020</figcaption>
  </figure>
  <figure class="mySlides fade">
    <img src="../pict/Slide/Slide_Bull-D-2009.jpg" title="Carte BULL-D des annees 1970">
    <figcaption class="text">Carte BULL-D des ann&eacute;es 1970</figcaption>
  </figure>
  <figure class="mySlides fade">
    <img src="../pict/Slide/Slide_IBM_5150-2007.jpg" title="Ordinateur personnel IBM PC 5150 de 1981">
    <figcaption class="text">Ordinateur personnel IBM PC 5150 de 1981</figcaption>
  </figure>
</div>

... dans ce cas il ne faut pas oublier de mettre à jour un minimum le CSS avec l'ajout de :

Code:

1
2
3
4
5
6
.mySlides {
  margin: 0;          /* reset */
}
.mySlides img {
  max-width: 100%;    /* pas de style inline */
}