# How did the carousel initialization conflict get diagnosed without cloning the repo?
*FlanneryAllen/codetrails@main · investigation · 8 markers*

> **The problem.** Julie spent over an hour debugging why the 4th carousel slide wouldn't display on the innovation page—the carousel was skipping from slide 3 back to slide 1.
>
> **The trail.** She created a CodeTrails link showing the wiring tour through `FileCityTrailAPI`, `TrailPersistence`, `TrailStore + IPC`, the HTTP routes, `FileCityTrailPanel`, and `useTrail`; Michael opened it in his browser and left a note: *"But the image doesn't render."*
>
> **The answer.** Michael's hypothesis was correct—two carousel initialization functions (`initCarousel` for all slides, `initStrategyCarousel` hardcoded to 3 slides) were conflicting on the same DOM element, causing the strategy carousel's 3-slide limit to override the innovation page's 4-slide carousel.

**Author:** Julie Allen · **Updated:** 2026-05-23T18:19:19.876Z

## Markers
1. **Julie hits a wall after 1+ hour** — _(no file)_
   After over an hour of debugging—opening inspect, checking console logs, taking screenshots—the 4th carousel slide still won't display. The JavaScript navigation works for slides 1–3, but clicking next from slide 3 wraps back to slide 1 instead of advancing to slide 4. At this point, Julie doesn't even know what to ask.
2. **Julie creates a trail** — _(no file)_
   Julie authors a trail titled *"Trail wiring tour (electron-app)"* with 6 markers tracing the flow from `FileCityTrailAPI` (shared contract) → `TrailPersistence` (disk storage) → `TrailStore + IPC` (broadcast layer) → HTTP routes → `FileCityTrailPanel` (renderer mount) → `useTrail` (subscription hook). The trail includes FileCity spatial view, sequence diagram, and code snippets anchored to exact lines.
3. **Trail link sent to Michael via Slack** — _(no file)_
   Julie sends the trail URL `https://app.principal-ade.com/trail/346ab185-d876-4f7f-8bdd-2f5b74610b76` in Slack at 11:49 AM with the message: *"Tried for over an hour to get the carousel to work. The agent had me open inspect and console in the browser and take screenshots. Still not working. Can you take a look and see if you know what the issue is? At this point I don't even know what to ask it."* No repo clone required, no branch checkout, no environment setup.
4. **Michael opens link in browser** — _(no file)_
   Michael (TheKicker25) clicks the link and the trail loads immediately in his browser. He sees the FileCity spatial map highlighting the 6 involved files, the sequence diagram showing the flow across `main`, `shared`, and `renderer` processes, and can drill into each marker's code snippet. No IDE, no local checkout, no Docker containers.
5. **Michael reviews and leaves note** — _(no file)_
   Michael reads the trail, opens marker 7 showing the console logs (*"Console logs confirm index 3 reached"*), and sees the debug notes: *"clicking next from slide 3 correctly calculates `currentIndex = 3`, applies `active` class to `slides[3]` and `dots[3]`, but the image doesn't render."* He leaves a note with his hypothesis: *"I did have one thought. This says that the 4th won't display the image which isn't really what I see. I see that when you click next and your ok the 3rd slide it goes back to the 4th. So ask it what could be causing it to not go to the 4th slide."*
6. **The annotation was correct—carousel conflict found** — _(no file)_ _(subject)_
   Michael's note pointed to the exact issue. **Root cause:** Two carousel initialization functions are running on the same carousel and conflicting. In `js/main.js:188-190`, `initCarousel()` runs for ALL `.ll-carousel` elements (supports 4 slides dynamically). In `js/main.js:271`, `initStrategyCarousel()` runs for `.carousel-container` elements (hardcoded to 3 slides at line 271: `const totalSlides = 3;`). The innovation.html carousel has both classes, so both functions attach event listeners to the same prev/next buttons. When `initStrategyCarousel()` runs, it limits navigation to only 3 slides, causing it to wrap back to slide 1 instead of going to slide 4.
7. **Fix: scope strategy carousel selector** — _(no file)_
   The fix changes the strategy carousel selector from `.carousel-container` to `.evidence-carousel .carousel-container` so it only targets the strategy page carousel (line 590: `<div class="ll-carousel evidence-carousel carousel-container">`), allowing the innovation page carousel to work correctly with all 4 slides. The trail updates to revision 2 with `✓ resolved` status.
8. **Commit created and shipped** — _(no file)_
   The fix is committed with the message: *"Fix carousel initialization conflict on innovation page. The innovation page carousel was being initialized by both the generic `initCarousel()` and the strategy-specific `initStrategyCarousel()` functions. The strategy carousel is hardcoded for 3 slides, causing it to skip the 4th slide on the innovation page. Changed the strategy carousel selector to `.evidence-carousel .carousel-container` so it only targets the strategy page carousel, allowing the innovation page carousel to work correctly with all 4 slides."* Generated with Claude Code. Total time from stuck to shipped: minutes, not hours.

---
Interactive view: https://app.principal-ade.com/trail/bc6a3653-9559-48b6-a7b8-8a78db9b8b0f
JSON: https://app.principal-ade.com/api/trails/by-id/bc6a3653-9559-48b6-a7b8-8a78db9b8b0f
Authored at `cd1e8166bd2b2355a0fcaff0ff2aae162f8b871d` (main).
To open a trail or tour locally in the interactive viewer, see https://app.principal-ade.com for the Principal CLI quickstart.