动态添加幻灯片到 Reveal.js 幻灯片

Question

我正在尝试编写一个函数，该函数将使用从本地图像文件夹中提取的内容为我的幻灯片动态创建幻灯片。我尝试了从 php 到 ajax 的几种不同脚本，但没有任何效果。我认为这可能是我调用有关 Reveal.js 框架的函数的方式，因为我认为代码应该可以工作。任何帮助将非常感激！这是我最近一直在努力的 ajax 函数：

var folder = "Images/";
                $.ajax({
                    url: folder,
                    success: function (data) {
                        $(data).find("a").attr("href", function (i, val) {
                            if (val.match(/\.(jpe?g|png|gif)$/)) {
                                $(".slides").append("<section data-background-image='" + folder + val + "'data-background-size='contain' data-autoslide='5000'></section>");
                            }
                        });
                    }

我确信我刚刚在这里做了一些愚蠢的事情，但如果有人有任何 Reveal.js 经验，如果你能指出我正确的方向，那就太好了！

Answer 1

您可以使用 https://github.com/mpelikan/reveal-add-remove.js 动态添加或删除幻灯片。

首先从幻灯片中删除所有幻灯片后，我将按照以下方式将它们添加到 AJAX 中：

$.ajax({

    url: "myurl",
    dataType: "json",
    success: function (data) {

        var slides = Reveal.getSlides();  // Array of all slides
        slides.forEach(function (item, index) {
            Reveal.remove(0);
        });

        data.slides.forEach(function (item, index) {
            Reveal.add(item);
        });

    }

},