✨ Added auto-sliding carousel on homepage with multiple images

[hrishikaranjan]

Pull Request

🚀 Homepage Carousel Feature Added

This PR adds an auto-sliding carousel on the homepage to display featured food items and donations.

Features

• Smooth auto sliding carousel
• Next/previous buttons
• Multiple images added
• Responsive UI

Type of Change

• [x ] ✨ New feature
• 🐛 Bug fix
• 🎨 UI / UX improvement
• ♻️ Refactor / cleanup
• ⚡ Performance improvement
• 📱 Responsive / mobile fix
• 📚 Documentation update
• 🧪 Tests (if applicable)

---

Related Issue(s)

• Closes Add moving carousel component to improve UI #546
• Related to #

---

What Was Changed

• Added auto-sliding carousel on homepage
• Displays featured food donation images
• Added next and previous navigation controls
• Integrated carousel with existing homepage layout
• Added multiple food images for better UI experience
• Ensured responsive design and smooth transitions

---

Screenshots / Demo (Required for UI changes)

Screen.Recording.2026-02-09.222004.mp4

---

How to Test

1. Open index.html in browser
2. View homepage hero section
3. Carousel will auto-slide every 3 seconds
4. Use next/previous buttons to navigate images

---

UI / UX Checklist

• Responsive on desktop
• Responsive on tablet
• Responsive on mobile
• Animations feel smooth and intentional
• No layout shifts or visual glitches
• Accessible and readable text

---

Technical Checklist

• Uses only HTML, CSS, and JavaScript (no external frameworks)
• Follows existing code structure and style
• No console errors or warnings
• No hardcoded sensitive data
• LocalStorage usage (if any) is safe and optional

---

Performance Impact

• No noticeable performance impact
• Improves performance
• Potential performance impact (explain below)

Details (if any):

---

Accessibility Considerations

• Keyboard navigable
• Sufficient color contrast
• Click targets are touch-friendly
• ARIA labels added where necessary

---

Additional Notes

---

Reviewer Notes

[hrishikaranjan]

@angelabera Hi! I’ve implemented the homepage carousel feature with smooth auto-sliding and multiple images. Kindly review and merge when possible. Thank you!

[angelabera]

doesn't look good at the top of the page, UI doesn't look good

[hrishikaranjan]

https://github.com/user-attachments/assets/977a35ee-070b-4b06-ba74-95261cf5f5d8
doesn't look good at the top of the page, UI doesn't look good

Hi @angelabera,

Thanks for the feedback regarding the UI.
I wanted to confirm the preferred placement of the carousel feature so it aligns well with the existing design.

Should I:

1. Integrate the carousel within the hero section without removing existing elements, or
2. Add it as a separate featured section below the hero (before "How ShareBite Works")?

Please let me know your preference so I can update the PR accordingly.

[hrishikaranjan]

@angelabera Please tell me ..Is Previous Positon is OK?? Or I replace this image and Place carousel here??

[angelabera]

no the previous one doesn't look good