Image Carousel

The image carousel component takes in an array of image URLs. Example image URLs are provided in the skeleton code.

Layout and positioning:

• The image carousel should be centered on the screen with a maximum size of 600px by 400px. Images should shrink to fit within the carousel so that the entire image is visible.
• Empty parts of the carousel can be filled with black.
• If the screen width is smaller than the image, the carousel should be resized to fit within the available horizontal space.

Navigation:

• Left and Right Navigation Buttons to allow users to navigate through the images.
  • The left button (⬅️) must have id="Previous".
  • The right button (➡️) must have id="Next".
• The buttons should allow a cycling behavior, i.e. after the last image, the image cycles back to the first.
• Add page buttons at the bottom to directly jump to an image. You may assume there will be fewer than 10 images.
• Each page button must have a unique id in the format pageButton-<index> (e.g., pageButton-0, pageButton-1).
• A message "No images available." must be shown when the image array is empty.

Reference UI