Randomiser les diapositives dans révéler.js

Je présente une présentation avec environ 300 diapositives. Le but de cette présentation est de faire défiler les diapositives en “mode kiosque” sur un moniteur derrière une cabine de conférence.

Pour créer un “mode kiosque”, j’ai:

 Reveal.initialize({ controls: false, // hide the control arrows progress: false, // hide the progress bar history: false, // don't add each slide to browser history loop: true, // loop back to the beginning after last slide transition: fade, // fade between slides autoSlide: 5000, // advance automatically after 5000 ms }); 

Cela fonctionne très bien, mais j’aimerais randomiser les diapositives. Les diapositives ne sont actuellement qu’une liste de 300 balises

dans le document d’index – elles ne sont pas extraites de l’extérieur. Actuellement, random: true n’est pas une option de configuration dans reveal.js.

L’ordre d’affichage des fragments peut être contrôlé avec data-fragment-index . Est-il possible de faire quelque chose comme ça avec les sections? Y at-il un moyen de tromper révéler dans les randomiser mes diapositives?

Je préférerais les mélanger à chaque fois, c’est-à-dire afficher les diapositives 1 à 300 dans un ordre aléatoire, puis les mélanger et afficher de nouveau les images 1-300 dans un ordre aléatoire différent. Je serais également heureux de simplement sauter à une diapositive aléatoire pour chaque transition, cependant.

A partir de reveal.js 3.3.0, il y a maintenant une fonction d’aide intégrée pour le classement aléatoire des diapositives.

Si vous souhaitez que l’ordre des diapositives soit aléatoire dès le départ, utilisez l’option de configuration shuffle :

 Reveal.initialize({ shuffle: true }); 

Si vous voulez dire manuellement à discover.js quand il faut mélanger, il existe une méthode API:

 Reveal.shuffle(); 

Pour mélanger la présentation après chaque boucle terminée, vous devez surveiller les changements de diapositives pour détecter le retour à la première diapositive.

 Reveal.addEventListener( 'slidechanged', function( event ) { if( Reveal.isFirstSlide() ) { // Randomize the order again Reveal.shuffle(); // Navigate to the first slide according to the new order Reveal.slide( 0, 0 ); } } ); 

Bien que cette fonctionnalité ne soit pas intégrée à Reveal, elle vous permet de configurer des hooks d’événement pour effectuer des actions lorsque toutes les diapositives sont chargées, ce qui signifie JQUERY TO THE RESCUE!

Vous pouvez combiner l’évènement “Toutes les diapositives sont prêtes” avec le javascript simple pour réorganiser toutes les section , voici un simple PoC:

Tout d’abord, importez jQuery, je l’ai fait en l’ajoutant directement au-dessus de l’importation pour js / reveal.min.js:

Ensuite, configurez un écouteur d’événement:

 Reveal.addEventListener('ready', function(event) { // Declare a function to randomize a jQuery list of elements // see http://stackoverflow.com/a/11766418/472021 for details $.fn.randomize = function(selector){ (selector ? this.find(selector) : this).parent().each(function(){ $(this).children(selector).sort(function(){ return Math.random() - 0.5; }).detach().appendTo(this); }); return this; }; // call our new method on all sections inside of the main slides element. $(".slides > section").randomize(); }); 

Je mets ceci correctement après avoir déclaré mes parameters et dépendances Reveal, mais je suis sûr que vous pouvez le placer n’importe où.

Ce que cela fait, c’est d’attendre que tous les javascript, css, etc. soient chargés, de réordonner manuellement les diapositives dans le DOM, puis de laisser Reveal faire son travail. Vous devriez être en mesure de combiner cela avec tous vos autres parameters de révélation, car il ne fait rien de perturbateur pour se révéler.

En ce qui concerne la partie “les mélanger à chaque fois”, la manière la plus simple de le faire serait d’utiliser un autre écouteur d’événement, slidechanged . Vous pouvez utiliser cet écouteur pour vérifier si la dernière diapositive vient d’être slidechanged , après quoi la prochaine fois que slidechanged est appelé, vous pouvez simplement actualiser la page.

Vous pouvez le faire avec quelque chose comme:

 var wasLastPageHit = false; Reveal.addEventListener('slidechanged', function(event) { if (wasLastPageHit) { window.location.reload(); } if($(event.currentSlide).is(":last-child")) { // The newly opened slide is the last one, set up a marker // so the next time this method is called we can refresh. wasLastPageHit = true; } });