Getting an image carousel of models to work

[Robeater]

Hi all,

Afraid I don't have much JS experience, but I'm trying to get a 3D carousel of images to display like the ones in this example. I copied the code into my page as well as the .glb and .png files and it didn't seem to work. Everything displays correctly but the slider buttons at the bottom don't actually change the file (i.e. switchSrc doesn't switch the src).

Does anyone know why this may be? I can post my code but it's exactly the same as the 'WebXR Demo' linked. Thanks for any help.

edit: the only changes I made to the code was changing the relative path to the files hosted on my site

[elalish]

Have you checked the console log? I'd bet you just have the wrong file path or your CORS headers aren't set on the server.

[Robeater]

It doesn't look like it's throwing any related errors or warnings in the console log. I redirected all the linked files to the original path (on modelviewer.dev) and the problem persists. I can also change the displayed .glb by manually changing the filename in , it's just the <script> tag that isn't working. Is there an easy way to debug the JS in console?

[Robeater]

Update: I added a console.log() and it appears to be correctly identifying which slide is pressed, just not updating the src model. This does lead me to believe it's a problem with the file path but it's not throwing an error and the code is still mostly identical to the WebXR Demo.

[Robeater]

I got it working. I had it on a page with a few other different model-viewer elements with different models, and it started working properly when I copied it over to a fresh page.

Not sure what the issue was, but that's a fix in case anyone else has this problem.

[Hexa93]

Hello! I'm having the same problem. Not sure what you mean with "fresh page". I have everything in a single folder, on my desktop (thought it might help with permissions).
This is my code:
const baseURL = "C:/Users/User/Desktop/products/";

window.switchSrc = (element, name) => {
const src = baseURL + name + '.glb';
const poster = baseURL + name + '.webp';
modelViewer.src = src;
modelViewer.poster = poster;
const slides = document.querySelectorAll(".slide");
slides.forEach((element) => {element.classList.remove("selected");});
element.classList.add("selected");
};
Unfortunately still not working.

[Robeater]

I just had multiple model viewer instances on the same webpage, with a <script> for each. The script from a previous model viewer was interfering with the one I was testing with further down the page. If you only have one then you have different issue, check the console log