3.2 Configuring Your Presentation

The presentations you saw in the previous videos used the default options, but one of the great things about reveal is the fact that it's very customizable. And there are just so many options to go through that it could take us a long time to go through all of them. So in this lesson we're gonna go through the ones that you're probably going to use the most. So let's begin. The way you can customize Reveal is right here at the bottom, where its initialized, all right? You can pass in the various options like this. You put in the option name, and then the option value, and that's it. So, as far as options, let's start with this controls. And I'm gonna set this the true. Now controls, or basically determine whether or not you want to use these arrows to navigate through your slides. By default it's true, but I can set it to false. And that's gonna remove the visual control, I can still use my arrow keys and my space bar to navigate through the slides but the controls themselves are gone. For now, let's keep them to true. You can also set the position of the controls using the properly control or controls layout. By default, its bottom dash right. But I can put them for example on the edges. And that will display them here and here. Unfortunately, you cannot position these controls to the bottom left or on the top. The only two options available are edges and the bottom right which is the default. Another thing you can control is this progress bar. So as we go through the slides, you'll see this progress along the bottom showing you how far into the presentation you really are, based on the number of slides. This is very useful, but if for some reason you don't like that you can simply say progress false, and that will remove it completely. By default this is true. In our case, we're gonna leave it the true because I think that's quite a useful feature. Something else you can control is whether or not you want a slide number. So slide number by default this is false, but if you set it to true, it's gonna show all low number right here in the corner indicating the number of the slide you're currently on. That's a pretty useful feature. As I mentioned previously, you can also use the keyboard to control the slides. But if you want to disable that behavior, you can do so with the keyboard option. So by default, it's true but if you set it to false it's gonna, Remove the ability to control the slider using your keyboard, instead you will just use the arrows. Let's leave at true because controlling with the keyboard is actually very, very good. Here's something very cool. If you were to hit Escape when you're presenting this slide, you'd be taken to a slide overview. And you can click on any of these slides to see the full version. If you don't want that behavior, it can simply say overview false. By default, this is true. And now if we hit Escape, that behavior is removed. What else have we got? We have vertical centering. So by default, all of these slides are centered vertically. But if we want, set this back to true, if we want, we can set central false and that would essentially not centered the slides vertically. It's really up to you. It really depends on what exactly you want to present. But here is the option that makes it happen. Let's stick this to true. Something else you can control is whether or not you want to enable touch navigation on devices that have touched input, and that's happening with the property touch, which by default is true, but if you set it to false, it's gonna prevent you from swiping left and right to go through the slides. I think this is actually a very cool option, so we're gonna leave this the truth. Here's another useful option that's called loop. So loop by default is false, but if you set it to true you can do the following, you can get to the last slide and then go back to the first one. So you can essentially have a never ending loop of slides. By default when this is set to false if you get to the last slide, you don't have a forward option, you can just go back. But actually loop is actually very useful because you can just loop through all the slides endlessly. Now, you can also make your presentation start automatically by using autoSlide. So autoSlide, by default at 0 which means it's deactivated. But you can set it to for example, 2,000 milliseconds which is two seconds. And that will, Create a two second delay between switching slides. And you also have this visual indicator here, showing you exactly when the slide is gonna change. And you can also pause and play your presentation from there. That is pretty cool. Now let's actually set this to a longer time, 5000, and move on to the next property, which is called Mouse Wheel. So Mouse Wheel basically allows you to use well, the mouse wheel for slight navigation. By default, it's false, but if we set this to true, then we can use the mouse wheel to cycle through all of the slides. Scrolling down will move forward, scrolling up will move backwards. Now what about transitions? Well, slide transitions can be set globally for all slides or they can be set individually for each slide. I'll show you how you can set individual transitions in the next person, but globally you would use the following option transition. Now by default, it's slide. So it's the transition that you see here, but there are a couple of options you can choose from fade, which looks like this. The slide simply fade in and fade out. You can choose convex, Which look like this. Pretty cool. You can choose concave, Which looks like this and it can choose a zoom, Which looks like this. I think this is actually a very interesting effect. You can also change the transition speed. So transition speed by default its default, but you can also set it too slow or fast. So, slow will basically look like this. It's a much slower smoother transition. Now here's something very interesting you can set the display properly. So displayed by default it's block. This is the display mode that will be used to show the slides. So block will actually have no effect, right? It's the default but you can set it for example to grid if you're planning to use CSS grid or you can set it to flex. Right, so now as you can see because I set this to flex my slide children here are displayed in a flex context. And then you can go into CSS and use flex specific properties or flexbox specific properties for these children, very cool. For now, let's keep this a block. Now the final three options I wanna show you right now are about control the presentation size. Because by default, the presentation is scaled automatically depending on the view port size. But it can also specify the width, a height, and a margin. So let's say for example width 800 and height I don't know, 600. And that will make these a specific size. Let's go with 400 by 300 so we can see this more clearly. Right now we have a 400 by 300 and the content is scaled to fit that area. Now notice these are not unit values these are unitless values, so they will be scaled accordingly. I can also set a margin and the margin is actually set as a factor. So if I do a factor of one, they'll basically create a 100% margin around the slide. But I can do something like maybe 0.2 or 0.3 and that's gonna create a lower margin all around my content. Here is a 0.5, right? And this is really cool because the slight content is automatically scaled to fit the available space. So you can really customize this to fit your content properly. Let's stick here with 0.3 and 800 by 600, all right? And I think that looks pretty good for me. So those are a couple of options that I think will be using the most when customizing the Reveal framework. Now, let's talk about slide transitions, slide backgrounds, and also fragments. These are some very interesting features of the framework and we'll talk more about them in the next lesson.