Now you are going to create a simple image slider. The image slider should:
- Contain arrows on each side to advance the image forward or backward.
- Automatically move forward every 5 seconds.
- Contain the navigation circles at the bottom that indicate which slide we are on. The navigation circles should be click-able to advance to that particular slide.
The most important thing is to get the slider sliding. Don’t spend too much time worrying about getting your images to display at the correct size.
Think of how you would set up the different elements withing 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!
Push your solution, create the pull request and submit its URL on the Quiz below.
0 of 1 Questions completed
You have already completed the quiz before. Hence you can not start it again.
Quiz is loading…
You must sign in or sign up to start the quiz.
You must first complete the following:
0 of 1 Questions answered correctly
Time has elapsed
You have reached 0 of 0 point(s), (0)
Earned Point(s): 0 of 0, (0)
0 Essay(s) Pending (Possible Point(s): 0)
Submit your pull request URL
Grading can be reviewed and adjusted.Grading can be reviewed and adjusted.
This response will be awarded full points automatically, but it can be reviewed and adjusted after submission.