Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
So if the currentPanel equals totalPanels, we know that we are on the last item. Let's hit a space. Let's put two ampersands signs. We want to test the second condition inside of this if statement, and the second condition is going to be navClicked, double equals, then a zero. So if we were on the last panel and the user clicks the navigation item 0, which is the first item, we know that we need to create an animation that goes from the last panel to the first panel.
So inside of the if statement, let's just put an alert in here. Two tick marks inside for a string literal, and we're going to type animate from last to first. This way we can test this in a browser and make sure that when we're actually clicking from the last item to the first item that this logic is actually working properly. Now let's bring our cursor inside of the parentheses for the else-if statement.
We can add a few spaces in there. We're going to say window.currentPanel, double equals, 1, two ampersands, and navClicked, double equals, and let's do a beginning and ending parentheses inside of here. We want to calculate window.totalPanels minus 1.
So this statement here is only going to happen if the condition up here, which is the currentPanel equals the totalPanels and the item that clicked on was 0, we're going to come down here and check to see if the currentPanel is 1. So we're on the first panel of the content of the marquee and the nav item that was clicked equals the totalPanels, which is 4-1, which is going to give us 3. Because remember, the nav items go 0, 1, 2, 3. They count from 0 to 3 instead of 1 to 4. So if we know that nav item equals the last panel and we're currently on the first panel, we're going to run this statement.
So let's come up here and copy the alert statement. Let's paste it down here, and we're going to say, we're going to animate from first to last. Then inside of the final else statement we're just going to paste an alert, and we'll just type animate normally. So let's go test this in a browser and make sure that we see these alerts every time we expect to see them. So let's hit File > Save, let's come back out to our browser, and let's hit Reload.
So now we know where if statement are properly determining whether the person is on the last panel and going to the first or on the first and going to the last, so in the next movie we can start by modifying the animation scripts to create that wraparound effect.
Get unlimited access to all courses for just $25/month.Become a member
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.