fix: Testimonials Carousel Swipe Navigation Stuck on Mobile #1667#1670
fix: Testimonials Carousel Swipe Navigation Stuck on Mobile #1667#1670aniketmishra-0 wants to merge 2 commits intoreactplay:mainfrom
Conversation
Add a new play that calculates Basal Metabolic Rate and Total Daily Energy Expenditure using the Mifflin-St Jeor Equation. Features include metric and imperial unit support, five activity levels, weight loss and gain calorie targets, responsive design, and smooth result animations. Closes reactplay#1660
👷 Deploy request for reactplayio pending review.Visit the deploys page to approve it
|
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
There was a problem hiding this comment.
Hey! contributor, thank you for opening a Pull Request 🎉.
@reactplay/maintainers will review your submission soon and give you helpful feedback.
If you're interested in continuing your contributions to open source and want to be a part of a welcoming and fantastic community, we invite you to join our ReactPlay Discord Community.
Show your support by starring ⭐ this repository. Thank you and we appreciate your contribution to open source!
Stale Marking : After 30 days of inactivity this issue/PR will be marked as stale issue/PR and it will be closed and locked in 7 days if no further activity occurs.
There was a problem hiding this comment.
Pull request overview
Fixes mobile swipe interactions for the homepage Testimonials carousel by adjusting Swiper touch handling and nested scroll behavior. The PR also introduces a new “BMR & TDEE Calculator” play, which is unrelated to the stated carousel bugfix scope.
Changes:
- Update Testimonials carousel configuration to better capture touch gestures on mobile.
- Update testimonial quote container to allow vertical scrolling without blocking horizontal swipes.
- Add a new “BMR & TDEE Calculator” play (component + styles + assets + README) and export it via
src/plays/index.js.
Reviewed changes
Copilot reviewed 6 out of 7 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| src/common/Testimonial/TestimonialSection.jsx | Adds Swiper props (grabCursor, touchEventsTarget="container") to improve mobile swipe handling. |
| src/common/Testimonial/TestimonialCard.jsx | Adds touchAction: 'pan-y' on the scrollable quote area to prevent it from capturing horizontal swipes. |
| src/plays/index.js | Adds export for the new BMR/TDEE play (also broadens PR scope beyond the described bugfix). |
| src/plays/bmr-tdee-calculator/BmrTdeeCalculator.jsx | New BMR/TDEE calculator play implementation. |
| src/plays/bmr-tdee-calculator/styles.css | Styles for the new calculator play. |
| src/plays/bmr-tdee-calculator/cover.svg | Cover asset for the new calculator play. |
| src/plays/bmr-tdee-calculator/Readme.md | Documentation for the new calculator play (contains a formula inconsistency noted in comments). |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
|
|
||
| <div className="mx-2 mt-4"> | ||
| <blockquote className={`${home && 'h-32'} max-h-32 px-6 overflow-y-auto`}> | ||
| <blockquote className={`${home && 'h-32'} max-h-32 px-6 overflow-y-auto`} style={{ touchAction: 'pan-y' }}> |
There was a problem hiding this comment.
className={${home && 'h-32'} ...} will stringify to include the literal class "false" when home is not passed (e.g., in Testimonials.jsx). This produces an unintended class name in the DOM; switch to a conditional join/utility (e.g., only include 'h-32' when home is truthy) so no boolean gets coerced into the class string.
| <blockquote className={`${home && 'h-32'} max-h-32 px-6 overflow-y-auto`} style={{ touchAction: 'pan-y' }}> | |
| <blockquote className={`${home ? 'h-32 ' : ''}max-h-32 px-6 overflow-y-auto`} style={{ touchAction: 'pan-y' }}> |
| ### Formulas Used | ||
|
|
||
| **Mifflin-St Jeor Equation:** | ||
| - Male: BMR = 10 × weight(kg) + 6.25 × height(cm) − 5 × age − 5 |
There was a problem hiding this comment.
The README’s Mifflin–St Jeor equation for males is incorrect: the constant should be "+ 5" (not "− 5"). This currently conflicts with the implementation in BmrTdeeCalculator.jsx and could mislead users; please correct the formula text.
| - Male: BMR = 10 × weight(kg) + 6.25 × height(cm) − 5 × age − 5 | |
| - Male: BMR = 10 × weight(kg) + 6.25 × height(cm) − 5 × age + 5 |
| // Do not modify the content of this file | ||
| export { default as BmrTdeeCalculator } from 'plays/bmr-tdee-calculator/BmrTdeeCalculator'; | ||
| export { default as CodeEditor } from 'plays/code-editor/CodeEditor'; |
There was a problem hiding this comment.
This PR is described as a fix for the Testimonials carousel swipe issue, but it also adds a new play (BMR/TDEE calculator) and updates the plays export index. Please either update the PR title/description to reflect the additional scope, or (preferably) split the new play into a separate PR so the bug fix can be reviewed and released independently.
Scroll.Manually.webm✅ Auto-play carousel |
1 participant
Bug Fix: Testimonials Carousel Not Working Swipe Navigation Stuck on Mobile
Closes #1667
Problem
The Testimonials carousel on the homepage was unresponsive to swipe/touch gestures on mobile devices. Users could not navigate between testimonial cards by swiping, making the carousel effectively stuck on the first visible slide(s).
Root Cause
Two issues were identified:
Touch events captured by inner scrollable content Each
TestimonialCardcontains a<blockquote>withoverflow-y: autofor long quotes. On mobile, this scrollable region intercepted horizontal touch/swipe events before they could reach the Swiper carousel, preventing slide transitions.Touch event listeners attached to wrong target By default, Swiper attaches touch event listeners to the wrapper element. When nested scrollable content exists inside slides, touch events get consumed before Swiper can process horizontal swipes.
Changes Made
TestimonialSection.jsxtouchEventsTarget="container"prop to<Swiper>TestimonialSection.jsxgrabCursorprop to<Swiper>TestimonialCard.jsxstyle={{ touchAction: 'pan-y' }}to the scrollable<blockquote>Testing
Screenshots / Demo
Tested on Chrome DevTools mobile emulation (iPhone 12 Pro, Galaxy S20) carousel now responds to horizontal swipe gestures.