在reveal.js中随机化幻灯片
我有大约300张幻灯片的reveal.js演示文稿。 此演示文稿的目的是在会议室后面的显示器上以“自助服务terminal模式”循环播放幻灯片。
要创build一个“信息亭模式”，我有：
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 });
这工作得很好，但我想随机幻灯片。 幻灯片目前只是索引文件中的300 <section>标签的列表 – 它们不被从外部的任何地方拉出。 目前random: true不是reveal.js中的configuration选项。
片段的显示顺序可以通过data-fragment-index来控制。 有没有可能做这样的部分？ 有没有办法欺骗reveal.js随机我的幻灯片？
我喜欢每次洗牌 – 也就是以随机顺序显示幻灯片1-300，然后洗牌，然后以不同的随机顺序再次显示1-300。 不过，我也很乐意为每个转换跳转到一个随机幻灯片。
从reveal.js 3.3.0开始，现在有一个内置的帮助函数用于随机化幻灯片顺序。
如果您希望幻灯片顺序从一开始就是随机的，请使用shuffle config选项：
Reveal.initialize({ shuffle: true });
如果你想手动告诉reveal.js何时洗牌，有一个API方法：
Reveal.shuffle();
要在每个完成的循环之后随机播放幻灯片，您需要监视幻灯片更改以检测我们何时回到第一张幻灯片。
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 ); } } );
虽然Reveal本身没有内置的这个function，但是它可以让你在加载所有的幻灯片的时候设置事件挂钩来执行操作，这意味着需要急救！
你可以结合Reveal的“所有幻灯片已准备就绪”事件与简单的JavaScript重新sorting所有section s，这里是一个简单的PoC：
首先导入jQuery，我通过在js / reveal.min.js的导入之上直接添加它：
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
然后，build立一个事件监听器：
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(); });
在声明我的Reveal设置和依赖关系之后，我把它放在正确的位置，但是我确定你可以把它放在任何地方。
这样做是等待所有的JavaScript，CSS等加载，手动重新sorting在DOM中的幻灯片，然后让Reveal开始做它的事情。 您应该能够将其与所有其他显示设置相结合，因为它没有任何破坏性的显示自己。
关于“每次洗牌”部分，最简单的方法是使用另一个事件侦听器，即slidechanged 。 你可以使用这个监听器来检查最后一张幻灯片是否已经被转换到了，在下一次slidechanged被调用之后，你可以简单的刷新页面。
你可以用这样的东西做到这一点：
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; } });
