Join Justin Putney for an in-depth discussion in this video Using jQuery to display the current page, part of HTML5 Projects: Creating a Responsive Presentation.
So now, let's look at controlling the navigation and displaying the individual slides.…Let's start again by going to the index.html file in the start folder, but…this time in Chapter 30301. So here I am in Dreamweaver, going to add…a script tag but I'm actually going to show you where to get it first.…So if we go to a web browser and just type in jQuery Google library into Google,…Google hosts several libraries. And the advantage is that the user will…have that one location cached so it will load much faster if it's a commonly used…library, which jQuery is. So let's go down, click on jQuery, and you…can just copy the snippet here of the script tag.…
So, I'm going to use the keyboard shortcut and switch over the Dreamweaver.…I'm just going to paste this in, and the one thing you need to make sure is have…the proper protocol here. So, I'm going to add http: to the source…tag, and that will set us up with the jQuery library.…And then, we're going to add one other script tag for a script where we're…going to house our custom code for all the functionality.…
Discover how to structure the HTML and slide content; design the navigation to react to clicks, keyboard input, and swipe gestures; and use CSS to customize the slide display for different screens and animated transitions. Justin also includes a series of challenge-and-solution pairs to test your skills.
Then, when you're ready, watch the HTML5 Projects: Creating an Advanced Responsive Presentation follow-up course to enhance your web presentation slides with audio, video, and an automatic playback feature.
- Structuring an HTML5 slideshow
- Creating the default slide appearance
- Using jQuery to display the current page
- Adding swipe gestures for mobile
- Creating a pause screen
- Translating your ideas into CSS
- Using media queries to adjust the layout