BOWIE

Prev Next

Task 1

Create an array that contains the relative urls to all the images in the assets folder.

You can click on the image in the assets folder to copy the url.

Task 2

Create a global variable that stores an index to an array. Initial the index to 0.

Task 3

Update the img so the src attribute is the image at the current index.

Task 4

Use a forEach loop to append a thumbnail to the #thumbnails div.

Task 5

Add a click handler to the Next button. When it's clicked, increment the index and update the displayed image

Task 6

Add a click handler to the Prev button. When it's clicked, decrement the index and update the displayed image

Task 7

Don't go out of bounds! If the index is less than 0, set it to the max value. If the index is greater than the max value, start over at 0.

If you click Next or Prev repeatedly, it should keep showing all the images in a loop.

Bonus Task 1

Add a click handler so when you click on a thumbnail, it changes the index and updates the main image.

Bonus Task 2

Replace all the images with your own images! You don't have to put them in the assets folder, you can get the url of images you find on the internet.

Bonus Task 3

If you haven't already done so, create a function that takes an index as a parameter and updates the main image. Update everwhere you're changing the main image to use that function.