随机化reveal.js中的幻灯片

Question

我有reveal.js大约300张幻灯片的演示文稿.本演示文稿的目的是在会议室后面的监视器上以"信息亭模式"循环幻灯片.

为了创建"自助服务终端模式",我得到了:

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

这非常有效,但我想将幻灯片随机化.幻灯片目前只是<section>索引文档中300个标签的列表- 它们不会从外部任何地方拉出.目前random: true不是rev​​eal.js中的配置选项.

片段的显示顺序可以用data-fragment-index.是否可以通过部分做类似的事情？有没有办法欺骗reveal.js随机化我的幻灯片？

我的偏好是每次都将它们随机播放 - 也就是说,以随机顺序显示幻灯片1-300,然后将它们随机播放,并以不同的随机顺序再次显示1-300.不过,我也很乐意为每次转换跳转到随机幻灯片.

Answer 1

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

您可以将Reveal的"所有幻灯片准备就绪"事件与简单的javascript结合起来重新排序所有sections,这里是一个简单的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;
    }
});

Answer 2

截至reveal.js 3.3.0,现在有一个内置的辅助函数,用于随机化幻灯片顺序.

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

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