In this mini project, you will make a JavaScript based automatic image slideshow, which will loop over a set of images from the internet and display them one by one on the screen. In the process, you'll get to practice most of the JavaScript skills you have acquired over the course, including arrays, functions, creating dynamic event listeners, image preloading, etc. Let's get started!

Overview

You are to get images from the internet and change the src attribute of an <img> element after a fixed interval of time. The images should also be preloaded in background using JavaScript.

Optionally, you can also further beautify the slideshow using animation effects in jQuery.

Here's the slideshow we made (recorded with Fast 3G network throttling):