As part of the detailed product page, the application should implement an image slider 🎞️ that allows users to view multiple images of a selected product. This image slider should be populated with images fetched from the commercetools API 💻, or any other simple API chosen by the team.
- Fetch Product Images: For a given product, fetch all associated images from the API. This might involve the the
GET /{projectKey}/products/{ID}orGET /{projectKey}/products/key={key}endpoints in the case of commercetools API, which should include image URLs in the product data. - Implement Image Slider: Implement a user-friendly image slider that can handle multiple images. The slider should allow users to manually cycle through the images, and it should gracefully handle the case of a product with only a single image.
- Interactive Slider: The image slider should be interactive, letting users control which image is currently displayed. This might involve arrows on either side of the image, or a series of clickable dots representing each image.
- Image Layout: The images should be presented in a clean and organized way. Consider the size and aspect ratio of the images and how they will fit into the overall design of the page.
- The application successfully fetches multiple images for a product from the chosen API, when available.
- An image slider is implemented on the Detailed Product page, and can handle multiple images. The slider allows users to manually control which image is displayed.
- If a product has only a single image, the slider gracefully degrades to simply display that image without any unnecessary slider controls.
- Commercetools API endpoint for fetching product by ID
- Commercetools API endpoint for fetching product by ID
- Swiper, a modern mobile touch slider