A slideshow of images is a layout almost as old as the Internet itself. We'd like you to implement one, according to the video shown to you.
(there is no video yet so I will describe it in text)
STAGE 1 - EASY
- The slideshow shows one image at a time, at 800px * 800px size.
- It transitions between images with a "fade" transition.
- Reaching the end of the slideshow should loop you back to the beginning, and vice versa.
- To start, the only controls you have over the slideshow should be two arrows. The left arrow should go to the previous slide, and the right arrow should go to the next slide.
STAGE 2 - INTERMEDIATE
- Make the slideshow autoplay.
- The autoplay should advance each slide automatically every 500ms.
- When it reaches the end, it should loop back to the beginning.
PHASE 3 - ADVANCED
- Create a set of indicators that can be used to click to a particular index in the slideshow.
- Each indicator should be a 40px * 2px line that represents a slide.
- The indicator representing the currently active slide should "fill up" as a slide fulfills its autoplay duration, indicating how much time there is left on the current slide.
- If a user has moused over the slideshow, the indicators should stop and go to a static state, where they just indicate the currently active slide. They should resume when the user has moused out.