Fortunately, at this point, you already have all the tools you need to make these items without resorting to using a bloated framework like bootstrap. (Nothing against bootstrap… you just do not need it! Good for you!)
Animations are typically handled by CSS which is a little out of the scope of this lesson, but interactive stuff like this is no fun without a little motion! If you want to take a break and learn more about making stuff move watch the next video:
Duration: 28 minutes
You know what we’re talking about here. Picture a nav-bar or a button and when you click it the menu slides down nicely. As mentioned previously, you already know everything you need to create this element. Here are some things to keep in mind:
You can allow the menu to show up either on click or on hover.
visibleor something) or by manually setting the style in JS.
If you bundle your code into a module you can publish it to npm and then install and use it anytime you like! Nothing like publishing your own modules to make you feel like a pro 😎.
Mobile versions of your sites are almost definitely going to need their own menu implementation. Depending on how you decided to implement your drop-down, you could reuse it here, but there are tons of more inventive options out there.
Again, there’s not much instruction needed here – just practice.
Create a simple image carousel. It should contain arrows on each side to advance the image forward or backward. It should automatically move forward every 5 seconds. It should contain the little navigation circles at the bottom that indicate which slide you are on (and they should be click-able to advance to that particular slide).
Don’t spend too much time worrying about getting your images to display at the correct size — it’s more important to get the slider sliding.
This one is a little more involved than the last two, so think about how you would set up the different elements within the site.
Set up a very wide
divwhich will contain the individual "slides" of each image. By appropriately positioning that
divinside a container
div(which acts like a picture frame), you can choose which slide is visible at any given time.
Once you have the slider positioned properly, build functions for "next" and "previous" which will advance to the next or previous slide accordingly. Make the transitions smooth using simple effects.
Set up arrow buttons which activate those functions and play with cycling through the images.
Add in some navigation dots at the bottom of the slides. Make a horizontal series of empty circles with CSS immediately below the slideshow. Each circle represents a slide, so whenever a new slide is activated, its corresponding circle gets filled in so you can tell where in the show you are. Make each circle link to that particular slide, so you can click on the circle and it will jump to that slide.
Add a timeout which advances the slides every 5 seconds.
Play around with your slideshow!
- Is there anything we can help with up to this point? Do you have something to suggest about this chapter? Let us know in the comments below.