Skip to content

feat: enhance testimonials section with infinite scrolling carousel#132

Open
Pranav-IIITM wants to merge 3 commits into
PatelHarsh2006:mainfrom
Pranav-IIITM:feat/testimonial-carousel
Open

feat: enhance testimonials section with infinite scrolling carousel#132
Pranav-IIITM wants to merge 3 commits into
PatelHarsh2006:mainfrom
Pranav-IIITM:feat/testimonial-carousel

Conversation

@Pranav-IIITM
Copy link
Copy Markdown

Summary

Transforms the static testimonials section into a modern horizontally
scrolling infinite carousel with smooth animations and hover effects.


Changes Made

index.html

  • Wrapped testimonial cards inside a .testimonial-track-wrap div
  • Duplicated cards to enable seamless infinite loop animation
  • Added aria-hidden="true" on duplicate cards for accessibility

style.css

  • Added .testimonial-track-wrap styles with overflow hidden and
    fade edge effect using mask-image
  • Added @keyframes scroll-left for infinite horizontal scroll animation
  • Added hover pause: animation stops when user hovers over the section
  • Added hover effects on individual cards: translateY + scale + shadow lift
  • Removed old static flexbox layout from .testimonial-cards

Features Implemented

  • ✅ Infinite horizontal auto-scrolling carousel
  • ✅ Smooth CSS animation (no JavaScript, no external libraries)
  • ✅ Pauses on hover for readability
  • ✅ Scale + shadow hover effect on individual cards
  • ✅ Fade edges using mask-image for a polished look
  • ✅ Fully responsive on desktop and mobile
  • ✅ Accessible — duplicate cards marked with aria-hidden
  • ✅ Consistent with existing color palette and design theme

Related Issue

Closes #56


Screen Recording

Infinite.scrolling.carousel.mp4

Transforms the static testimonials section into a horizontally
scrolling infinite carousel.

Changes:
- Wrapped testimonial cards in a track container for carousel layout
- Added infinite scroll animation using CSS keyframes (scroll-left)
- Added fade edge effect using mask-image on the track wrapper
- Cards pause on hover for better readability
- Added hover effects: scale + shadow lift on individual cards
- Duplicated cards in HTML to achieve seamless infinite loop
- No external libraries used; pure HTML & CSS implementation

Closes PatelHarsh2006#56
@Pranav-IIITM
Copy link
Copy Markdown
Author

Hi @PatelHarsh2006,

I’ve completed the implementation for the testimonials section enhancement and opened the PR.

Implemented:

  • Infinite horizontal scrolling carousel
  • Smooth auto-scroll animation
  • Hover pause interaction
  • Card hover effects with scale/shadow
  • Responsive layout improvements
  • Accessibility support using aria-hidden for duplicated cards

PR: #132

I’d appreciate it if you could review the changes and share any feedback or requested improvements. Thanks!

@Pranav-IIITM
Copy link
Copy Markdown
Author

Hi @PatelHarsh2006, could you please review this PR when you get a chance?

The testimonials section has been upgraded into an infinite scrolling carousel with smooth animations, hover pause interaction, responsive behavior, and accessibility improvements.

Thanks!

@Pranav-IIITM
Copy link
Copy Markdown
Author

@PatelHarsh2006 Please review the PR

@Pranav-IIITM
Copy link
Copy Markdown
Author

Hi @PatelHarsh2006,

Could you please review PR #132 when you have a chance?

It adds an infinite scrolling testimonials carousel with smooth animations, hover pause, responsive design, and accessibility improvements.

Thank you!

@PatelHarsh2006
Copy link
Copy Markdown
Owner

@Pranav-IIITM Please Resolve conflicts, by syncing the Current Branch

@Pranav-IIITM
Copy link
Copy Markdown
Author

@PatelHarsh2006 Review the PR

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Improve Customer Feedback Section with Animated Scrolling Testimonials

2 participants