Fix carousel not looping if dragging past akaalroop.com

[Spacexplorer11]

Summary by CodeRabbit

• Bug Fixes
  • Improved carousel drag handling to correctly wrap around at content boundaries, yielding smoother continuous navigation during pointer movement.
  • Added a guard to carousel animations to prevent multiple concurrent animations, avoiding stutter and ensuring stable transitions.

[linear]

SPA-112 Carousel issue

[coderabbitai]

Walkthrough

The carousel's pointer-drag handling now computes a singleSetWidth (half the scrollWidth), updates scrollPosition by the drag delta, and conditionally wraps the position by subtracting/adding singleSetWidth when crossing positive/negative boundaries. An animation guard prevents starting a new auto-scroll if an animation is already running.

Changes

Cohort / File(s)	Summary
Carousel drag & auto-scroll src/routes/+page.svelte	Pointer move handler now computes singleSetWidth and applies boundary-aware wrapping to scrollPosition before translating. Reactive effect for showCarousel adds an animationFrameId guard to prevent concurrent animations. (+11/-2 lines)

Sequence Diagram(s)

(omitted — changes are confined to a single component's internal flow and do not introduce multi-component interactions requiring a sequence diagram)

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

• Make the carousel controllable - JIRA-114 & JIRA-63 #43 — Modifies the same carousel drag/scroll handling in src/routes/+page.svelte; likely closely related to wrapping/auto-scroll adjustments.

Suggested labels

enhancement, size/M

Poem

🐰
I hopped along the carousel track,
Wrapped positions kept me on the map,
No blanks, just projects in a row,
I nudge, it scrolls — away we go! ✨

🚥 Pre-merge checks | ✅ 6

✅ Passed checks (6 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly identifies the main issue being fixed: carousel not looping when dragged past bounds, matching the core change in the PR.
Linked Issues check	✅ Passed	The PR directly addresses SPA-112 by implementing boundary-aware wrapping to ensure the carousel loops correctly when dragged past its bounds, preventing blank screens.
Out of Scope Changes check	✅ Passed	All changes are scoped to carousel looping functionality: drag boundary handling, wrapping logic, and animation guards; no unrelated modifications detected.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Merge Conflict Detection	✅ Passed	✅ No merge conflicts detected when merging into main

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch carousel-issue-spa-112

---

No actionable comments were generated in the recent review. 🎉

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[cloudflare-workers-and-pages]

Deploying akaalroop-com with    Cloudflare Pages

Latest commit:	47d7848
Status:	✅  Deploy successful!
Preview URL:	https://2f3fd8c2.akaalroop-com.pages.dev
Branch Preview URL:	https://carousel-issue-spa-112.akaalroop-com.pages.dev

View logs

[Copilot]

Pull request overview

This PR updates the home page project carousel drag behavior to keep the “infinite” loop working when the user drags past the duplicated-content boundary.

Changes:

• Compute a singleSetWidth during drag and adjust scrollPosition when it exceeds the loop bounds.
• Apply the transform update after the boundary adjustment so the carousel stays visually continuous.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[coderabbitai]

Actionable comments posted: 1

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

src/routes/+page.svelte (1)

57-75: ⚠️ Potential issue | 🟠 Major

Possible duplicate requestAnimationFrame loops on repeated showCarousel toggles.

$effect on line 110 calls startSmoothScroll() every time showCarousel becomes true, and startSmoothScroll unconditionally starts a new requestAnimationFrame loop. If showCarousel toggles more than once (or the effect re-runs), multiple independent animation loops will stack, each decrementing scrollPosition and overwriting the transform — leading to progressively faster scrolling.

Consider guarding against starting a second loop when one is already running.

Proposed guard

 function startSmoothScroll() {
+  if (animationFrameId) return; // already running
   const animate = () => {

🤖 Fix all issues with AI agents

In `@src/routes/`+page.svelte:
- Around line 87-103: handlePointerMove lacks the null guard present in
startSmoothScroll and can throw when carouselContainer is not bound; add an
early return if carouselContainer is falsy at the top of handlePointerMove. Also
replace the single-step wrap logic that adjusts scrollPosition using +/-
singleSetWidth with a robust modulo-based wrap so scrollPosition is normalized
into the expected range (relative to singleSetWidth) even if delta exceeds one
cycle; use the same variables referenced here (startX, scrollStart,
scrollPosition, singleSetWidth) to compute the wrapped translateX value before
applying carouselContainer.style.transform.

[Spacexplorer11]

@coderabbitai do you approve?

[coderabbitai]

@Spacexplorer11: Yes, I approve! The changes effectively address the carousel looping issue by adding boundary-aware wrapping logic and preventing duplicate animations. The fix ensures the carousel remains populated when dragged past its bounds, eliminating the blank screen problem described in SPA-112. Great work integrating the animation guard suggestion!

✅ Actions performed

Comments resolved and changes approved.

[Spacexplorer11]

Fixes #63