From the course: Interactive Animations with CSS and JavaScript

Unlock the full course today

Join today to access over 22,600 courses taught by industry experts or purchase this course individually.

Auto-advance with JavaScript

Auto-advance with JavaScript

From the course: Interactive Animations with CSS and JavaScript

Start my 1-month free trial

Auto-advance with JavaScript

“

- [Instructor] So we've gotten to our second slide, and now we need to be able to advance our presentation without any user input. There are a few different ways we could do that. We could actually structure the whole thing using CSS animations and timeouts and that sorta stuff. It would get really convoluted in a hurry and difficult to organize. The simplest way, and the way I decided we're gonna go with this application is that we're gonna add the ability to put a timeout on the slide in the HTML, and then have some JavaScript that will advance the slide automatically. So let's go back to our code. So let's go back to our HTML file, and the way I would like to represent this, let's go ahead and duplicate our slide. So let's go take this second slide, and copy it, make a copy of it here, and now I have two slide twos, and I'm gonna add a new custom attribute now. To make the browser ignore this attribute, I'm gonna preface it with data hyphen, and then it can be anything we want, and…

Contents