Fizzi 3D Website tutorial

Good afternoon,

I am currently working through the Fizzi 3D website build tutorial from Alex Trost and I am having a slight issue that I can't seem to nail down. I completed the Carousel slice and after completion when I am arrowing thru the cans, I can't seem to figure out why the Black Cherry can will only appear once.

On initial launch it displays the BC can properly but as soon as you cycle thru the cans once, the BC doesn't display again; it shows the can as Watermelon (text displays Black Cherry correctly).

I have gone thru the final repo to check and see if I have anything wrong and I am stumped.

I have the code in GitHub for review - GitHub - tankmurdock/fizzi-tankmurdock

If anyone could take a look and provide any insight that would be awesome!!

Thanks in advance.

Neil

Impacted feature

Carousel feature not displaying cans properly

What steps have you taken to resolve this issue already?

Reviewed the final code to compare as much as possible

Errors

Black Cherry can only displays on the initial launch then can image stays a Watermelon with text displaying correctly

Your Role

Novice Developer learning how to use Prismic

Hosting provider

Not hosted yet only running local

Hey @new.support, thanks for asking!

It looks like there is still some small issues with Next 15 and React Three Fiber 9, especially with their alpha version (Next.js 15 using an RC version of React 19 and React Three Fiber 9 still not being released as stable)

I managed to get the carousel to work as expected by downgrading both to these versions in the meantime:

"@react-three/fiber": "^8.17.10",
"next": "^14.2.20",

You can follow these threads for updates from both ecosystem:

Let us know if that helps :)