7 days of unlimited WordPress themes, plugins & graphics - for free!* Unlimited asset downloads! Start 7-Day Free Trial
FREELessons: 7Length: 27 minutes

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.5 Options

Sequence.js has tons of options for customizing the way it works, so in this lesson we’ll have a look at a few you should start experimenting with.

2.5 Options

Hello, and welcome to lesson number five. In the previous video, you'll learn how to add animations to the content inside your steps. Now, sequence has a bunch of options for you to work with. I actually counted them, there are 41. And you can use them to customize the way Sequence works. Now because we don't have the time to cover all of them, and because some are for advanced usage, in this video, we're gonna cover just a few to get you started with experimenting. Now you already saw how to work with options. You define an options object, and you load it when you are initialize Sequence. And the option you learned, was key navigation. By default it's set if to false, but if you set it to true, it allows you to use the right and left arrow keys to navigate between slots. Now, the default behavior of the slider is that when you reach the end, and this is the 3rd slide. If you hit next it's gonna take you back to slide number one. And also when you're at slide number one and you hit back, it takes you to slide number three. And if you don't want this behavior, there is an option called cycle. By default it's true but if you set it to false, when you go to the last slide and you hit next, that's not gonna do anything. It's gonna disable that behavior. Same thing goes for slide number one. Another option you will most likely use is called autoPlay. Now autoPlay will cause Sequence to automatically navigate to the next step after a certain interval. And you can activate it by setting autoPlay the true. Now, by default, the interval is five seconds. So if I do a refresh here, you'll see that after five seconds, Sequence will move on to the next slide. And that's only gonna happen actually after I remove my mouse cursor from the inside of the container. There you go, so five seconds there. And after another five seconds we'll go to slide number three. There we go. And if I move my mouse cursor over, it's gonna pause autoPlay, which is a nice feature. If you want you can set your own interval by setting autoPlayInterval to the number of milliseconds that you want. So if you want to move every two seconds, you would say 2,000. And now. You get this. There are also some related options to autoPlay. For example, you can have an autoPlay direction that takes a number, one for forward, minus one for reverse. There's also autoPlay pause on hover. This is just the option I was talking about. This is set to true by default. But if we set it to false it's gonna disable that behavior altogether. Finally I want to show you how to work with navigation options. Because you can have previous and next buttons that allows you to switch between steps without touching your keyboard for example, if that's not what you want. So I've already showed you these in the sketch markups. And what I did was exported at least two images as SVGs. Now by default, these next and previous buttons are enabled, but Sequence does not automatically add the HTML for these elements in your page. You have to do that yourself. So a very good place to add them is inside your container. I'm gonna use an app element to add two anchor tags with the class of SeqPrep and next. Now it doesn't really matter what kind of elements you're using here. You can use a button, or you can use a div or anything, as long as you give the classes of SeqPrep and next. And you can put anything you want inside them. Text, images, in my case I'm using images. The two SVGs I told you about. And after a little bit of styling, where position my nav absolutely, I give it a very high Zed-Index so it's above all the slides. And set it in the center and at the bottom. My navigation looks like this. I just added a little bit of opacity and a transition between the normal and hover states. Okay, and that's the end of this lesson. Next time you'll learn a little bit about themes. So I'll see you there.

Back to the top