Slideshow

Example

Basic Features

Step 1: From the Cloud9 dashboard: Create a new workspace
Fill in the following text boxes on the form:
→ Workspace name: slideshow Copy
→ Clone from Git or Mercurial URL: https://github.com/studentmrcode/slideshow.git Copy
Click Create workspace button
Open index.html and click Run

Step 2: Replace the default content with your own content for the first slide.

Step 3: Make two more slides directly under the first slide. Each new slide should have an id that is one number higher than the previous slide.

Step 4: Remove the showing class from the two new slides so that only the first slide is showing.

Step 5: Make a variable for the slider.
Hint: If you're having trouble, look at your Photo Editor project.

Step 6: Show a new slide when the user moves the slider.
Hint: In your event listener function, get the new slide by its id, and add the showing class:
document.getElementById(yourSliderVariable.value).classList.add("showing");
Step 7: Hide the previous slide after showing the new slide.
Hint: To track what the previous slide was, make a variable to store the number of the slide that is showing. Add the following to Section 2 in your JavaScript:
var showingSlideNumber = 0;
After showing the new slide, get the previous slide by its id, and remove the showing class:
document.getElementById(showingSlideNumber).classList.remove("showing");
Step 8: After hiding the previous slide, update the showingSlideNumber variable so that the user can continue going through the slideshow.

Debugging help

Last topic Next topic