Input and Output of our GenZ Carousel App

Let's look at the kind of input and output our carousel app deals with.

Input:

Our app accepts user input in the form of uploaded images:

• Users can upload up to 10 images at once.
• Only image file types are allowed (JPG, JPEG, PNG, etc.).
• The uploaded images are previewed in the carousel using object URLs created with URL.createObjectURL.

If no images are uploaded, three default images are displayed from the /public/carousel folder.

From our deployed app:

Output:

Once images are uploaded, the app dynamically:

• Displays the images one by one inside a large bordered container
• Allows navigation using left and right arrows
• Shows clickable thumbnails for quick navigation
• Displays smooth transitions when switching slides

Everything is styled using the same colors, fonts, and layouts defined in the original design. This helps retain a consistent look, even when the content changes based on user input.

From our deployed app: