Download the starter file setup. Youre going to be writing your JavaScript in app.js.
The images folder has 10 images. You can replace these if you wish. Just name them the same or change the references in the html file.
Add a document ready statement to the JS file (app.js) to contain all code to be run when the app loads
Inside the ready() function
1.add click() handlers for the back button and the next button
2.Add code that will call getCurrentPhoto() and call fadeIn() on the object that is returned.
Create a function called getCurrentPhoto() that will return a jQuery object representing the currently selected photo.
Hint - You can use the ":visible" filter as part of your selector.
If nothing is visible, return the first image in the list using nth-child(1).
The logic for each button handler should:
0.Call getCurrentPhoto()
1.Call fadeOut() on that photo to fade it's visibility to 0
2.Add a callback function to the fadeOut() (basically an anonymous function as a parameter in it's parentheses) that will call fadeIn() on either the next() or prev() item, as the case may be.
3.Hint: In the next button handler you can check if the slide is the last one by using is(':last-child'). If that is true, you should fade out the current slide and show the first slide. In the previous button handler you can check if the slide is the first one by using is(':first-child'). If that is true, you can fade out the current child and show the last child.
It is not our intention to break the school's academic policy. Posted solutions are meant to be used as a reference
and should not be submitted as is. We are not held liable for any misuse of the solutions.
Please see the frequently asked questions page
for further questions and inquiries.
Kindly complete the form.
Please provide a valid email address and we will get back to you within 24 hours.
Payment is through PayPal, Buy me a Coffee
or Cryptocurrency.
We are a nonprofit organization however we need funds to keep this organization operating
and to be able to complete our research and development projects.