Build an image carousel that displays a sequence of images.

Requirements

• The image carousel component takes 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:
  • Display the first image in the array initially.
  • Add left/right navigation buttons to allow the user to navigate through the images. The buttons should support 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.
• Animations and transitions are not necessary for this question; they will be explored in Image Carousel II and Image Carousel III.

For this question, there is a technical restriction that only one image element should be in the DOM at any time.