Skip to content

Latest commit

 

History

History
27 lines (17 loc) · 1.89 KB

File metadata and controls

27 lines (17 loc) · 1.89 KB

🎯 Issue RSS-ECOMM-3_13: Implement Image Slider in Enlarged Image Modal (15 points)

📋 Description

The enlarged image modal should not only display a single product image 🖼️, but should also include a slider feature, enabling users to navigate through all product images fetched from the chosen API. This allows users to view all images of a product without having to close the modal.

🔨 Implementation Details

  1. Slider Setup: Implement a slider within the enlarged image modal. This could be a custom-built slider or one from a library or framework. The slider should display one image at a time and have navigational controls to cycle through the images.
  2. Image Fetching: Fetch all product images from the chosen API and include them in the slider. Ensure that these images are appropriately sized and formatted for the slider.
  3. Navigation Controls: Implement controls (like arrows or dots) to allow users to navigate through the images in the slider. These controls should be easily visible and intuitive to use.

🎨 Visual Implementation Ideas

  1. Slider Design: The slider should be clean and straightforward, focusing attention on the images themselves. Avoid unnecessary decorations or elements that might distract from the product images.
  2. Navigation Controls: The navigation controls should be designed in a way that they do not obscure the images but are still easily accessible for the user.

✅ Acceptance Criteria

  • The enlarged image modal includes a slider that displays all product images fetched from the API.
  • Users can navigate through the images using the slider controls.

🔗 Useful Links and Resources

  1. Simple carousel example
  2. Swiper.js - Most modern mobile touch slider
  3. Images