Sometimes, we want to randomize slides in reveal.js.
In this article, we’ll look at how to randomize slides in reveal.js.
Randomize Slides in Reveal.js
To randomize slides in reveal.js, we call Reveal.initialize with an object that has the shuffle property set to true.
For instance, we write:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/3.6.0/css/reveal.min.css" integrity="sha512-V5fKCVKOFy36w8zJmLzPH5R6zU6KvuHOvxfMRczx2ZeqTjKRGSBO9yiZjCKEJS3n6EmENwrH/xvSwXqxje+VVA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/3.6.0/js/reveal.min.js" integrity="sha512-QYXU3Cojl94ZRiZRjUZpyg1odj9mKTON9MsTMzGNx/L3JqvMA3BQNraZwsZ83UeisO+QMVfFa83SyuYYJzR9hw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<div class="reveal">
<div class="slides">
<section>Slide 1</section>
<section>Slide 2</section>
</div>
</div>
to add the link tag for the Reveal.js CSS file and the script tag to include the Reveal.js script file.
Then we add the slides in the div by setting the class of the slides container to reveal and the div for the slides to slides.
Finally, we write:
Reveal.initialize({ shuffle: true });
to initialize the slides with them shuffled.
Now when we load the page, we may see the slides in different order each time.
Conclusion
To randomize slides in reveal.js, we call Reveal.initialize with an object that has the shuffle property set to true.
