Ready to watch this entire course?
Become a member and get unlimited access to the entire skills library of over 4,900 courses, including more Web and personalized recommendations.Start Your Free Trial Now
- View Offline
- Understanding transition basics
- Working with 2D and 3D transforms
- Animating color changes
- Fading objects
- Changing the size of page elements and fonts
- Transitioning multiple properties at the same time
- Understanding keyframes and animations
- Working in the z-index
- Crafting transitions in Dreamweaver
Skill Level Intermediate
Now in the first line, it sets up a variable, transformProp, that's used throughout these functions. The first function that follows that sets the initial parameters, including the default orientation is horizontal. If for some reason you wanted your carousel to appear vertically at first, you would change the value that's on line 11, this .isHorizontal from true to false. The Carousel3D prototype transform function handles the actual rotation when the Next or Previous button is clicked. What may not be obvious is that rather than rotate all the images, it's actually the outer container, the carousel itself, that rotates.
Finally, all the way down near the bottom there is a setTimeout function that appends a ready class to the body tag when everything is set to go, kind of like a jQuery document ready type function. Speaking of jQuery, well, that's our final script tag to include, so let's head back to the source code, create a new, and I'm going to link to the CDN or content delivery network copy of the latest jQuery library. So we start again with the script tag, same type and the source is going to be a URL http://code.jquery.com/jquery.js.
So let's open that up, and I'm going to walk through the code, it's not terribly long, but I did want to give you a clear view of what's happening. So after we open the tag, the first thing that happens on line 2 is we declare a variable inc, short for increment, to 1. And then we set up the overall function which has two sub-functions, the first one takes place whenever the Next button is clicked, and the actual function code starts on line 6, where you can see, I construct the string for current figure, consisting of #fig + whatever the increment value is.
Now there are some special conditions, because I am working with a set number of images, and that's with a conditional statement next takes care of. So if the increment is 10 then I set nextFig to #fig1. So we are on the very last image and the next one is going to be the first image in the series, fig1. Otherwise, the string nextFig is going to be calculated by combining our set label with increment +1. Make sense right? Now the next two lines, 12 and 13, add and remove the showFig class from the appropriate place.
So because this is the Next button, showFig will be added to the next figure to be shown, and it will be removed from the current figure. Then on line 14, I increment the variable inc, and line 15 is another check to see if we've gone out of bounds or not. So if the increment has increased to 11, we reset it to 1. Now the next function, starting on line 18 comes in to play whenever Previous is clicked. This is essentially the exact inverse of the previous function. So again, I'm setting up currentfig to be the same thing, but now, instead of if inc=10, we check to see if the increment is at 1, and if it is then previous fig, preFig, is equal to 10 and otherwise, we set it up so that preFig is equal to my standard string #fig, plus the increment - 1, because we're going in the other direction.