javascript - 在 reveal.js 中随机化幻灯片

Question

我有一个 reveal.js大约 300 张幻灯片的演示文稿。此演示文稿的目的是在 session 亭后面的监视器上以“信息亭模式”循环播放幻灯片。

要创建一个“信息亭模式”，我有:

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。不过，我也很乐意为每次转换跳转到随机幻灯片。

Answer 1

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

您可以将 Reveal 的“所有幻灯片都准备就绪”事件与简单的 javascript 相结合，以重新排序所有 section s，这是一个简单的 PoC:

首先导入 jQuery，我通过将其直接添加到 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();
});

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

它所做的是等待所有 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;
    }
});