在reveal.js中随机化幻灯片

Randomize slides in reveal.js

本文关键字：随机化 幻灯片 js reveal      更新时间：2023-09-26

我有一个大约有300张幻灯片的reveal.js演示。本演示的目的是在会议摊位后面的显示器上以"kiosk模式"循环播放幻灯片。

创建一个"kiosk模式"我得到:

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。

片段的显示顺序可以用data-fragment-index控制。有可能对分段做类似的事情吗?有没有办法欺骗reveal.js随机化我的幻灯片?

我的偏好是每次对它们进行洗牌——也就是说，以随机顺序显示幻灯片1-300，然后对它们进行洗牌，然后以不同的随机顺序再次显示1-300。不过，如果每次过渡都随机跳转到一张幻灯片，我也会很高兴的。

虽然Reveal本身没有内置此功能，但它允许您设置事件挂钩，以便在加载所有幻灯片时执行操作，这意味着JQUERY要拯救!

你可以结合显示的"所有幻灯片都准备好了"事件与简单的javascript重新排序所有的section，这里是一个简单的PoC:

首先导入jQuery，我将它直接添加到for js/reveal.min.js的导入中:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

然后，设置事件侦听器:

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();
});

我把它放在声明我的显示设置和依赖项之后，但我很确定你可以把它放在任何地方。

它的作用是等待所有javascript, css等加载，手动在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;
    }
});

从揭示.js 3.3.0开始，现在有一个内置的辅助函数来随机化幻灯片顺序。

如果您希望幻灯片顺序从一开始就是随机的，请使用shuffle配置选项:

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 );
    }
} );
相关文章：