A basic vanilla JavaScript slideshow.
When coding something like a JavaScript slideshow, half of the problem is understanding how to split the lager objective into small steps. Download a copy of the index.html, styles.caa, and slideshow.js files and then follow these steps. Do not proceed to the next step until the current one is done and tested.
-
The images all need to be stacked on top of each other instead of underneath each other. Use CSS to place the images on top of each other.
-
Only one image meedds to be visible at a time. Use CSS to hide all the images but the first one.
-
In the
slideshow.jsfile, define acurrentvariable to track the current image. Set it to zero. This variable will go form zero, to three, and then back to zero (because there ar four images). -
Define a
totalvariable to track the number of images. Set it to four. -
Add a click event to the next button. For now
console.log()the word "next" when the button is clicked. This will confirm that the button is working. -
Inside the
nextbutton click event, increasecurrentvariable by one. Useconsole.log()to confirm that the variable has increased. -
Inside the
nextbutton click event, add an if statement that will reset thecurrentvariable to zero when thecurrentvariable is too high. -
Inside the
nextbutton click event, hide all images and then display the image based on the number inside thecurrentvariable. -
Redo steps five through eight except for a previous button.
-
Using JavaScript
setInterval()function, make the slideshow automatically change images every five seconds.
Note
There are sample code files for steps one through six. Try to complete each step without the samples. Use them as a last resort.
