Adding Reveal.js to the bootstrap studio

Bootstrap Studio Help
1

I tried to import Reveal.js project files to the bootstrap studio and work on it , but it does not work on bootstrap studio. I think some files are not imported. does anyone use reveal.js in bootstrap studio?

2

I just had a play around with it, it works ok, only problem is that the reveal css makes the bss preview go blank. the way I got around this was to delete the css file, do some changes and then relink the css.

If linked the file, hope this helps

https://raspy-mode-9918.bss.design/

1 Like
3

Thanks Richard
As I am very new to the world of coding I got a bit confused. can you provide more details about what have you done?

4

First I would set up your html using this structure

<div class="reveal">

<div class="slides">

    <section>

       content of first slide here

    </section>

    <section>

       content of second slide here

    </section>

    <section>

       Keep going until you have your design

    </section>

</div>

</div>

Then go to the design tab in bss (bottom right) Right click on styles and choose “Link External CSS”

in the pop up add “https://cdnjs.cloudflare.com/ajax/libs/reveal.js/4.1.2/reveal.css” in the url field and click import

Then right click on Javascript and choose “link external JS” and use file
https://cdnjs.cloudflare.com/ajax/libs/reveal.js/4.1.2/reveal.js

Then create a new javascript file (right click javascript > New > JS File

and add:

Reveal.initialize();

That is it in its simplest form

Personally, as you are just starting out, I would stay away from it at the moment, if you want a simple slider you can use the bootstrap carousel

Example here: reveal

1 Like
5

Using carousel is a simple solution but reveal.js comes with many useful features with make presentation more eye catching.

6

Thanks so much for providing details

1 Like