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

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

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

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

Answer 1

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

你可以结合Reveal＆＃34;所有幻灯片都准备好了＃34;使用简单的javascript重新排序所有section的事件，这里是一个简单的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();
});

在声明我的显示设置和依赖关系之后我把它放好了，但我确信你可以把它放在任何地方。

这样做是等待所有javascript，css等加载，手动重新排序DOM中的幻灯片，然后让Reveal开始做它的事情。你应该能够将它与你所有其他的曝光设置结合起来，因为它没有做任何破坏性的事情来揭示自己。

关于＆＃34;每次改变它们＆＃34;部分，最简单的方法是使用另一个事件监听器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，现在有一个内置的辅助函数可以随机化幻灯片顺序。

如果您希望幻灯片订单从一开始就是随机的，请使用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 );
    }
} );

随机化reveal.js中的幻灯片

2 个答案: