...
When you already have the library you should create a div to use it as a container for the viewer and give it an ID then you can create an AutosyncSpin instance.
As you can see in the image this example code you will need to define an object with this attributes:
...
| Code Block | ||
|---|---|---|
| ||
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Example</title>
<script src="https://vvs.autosyncstudio.com/lib/autosync-spin.js"></script>
</head>
<body>
<div id="spin-360-viewer"></div>
<script>
const autosyncSpin = new AutosyncSpin({
id: 'spin-360-viewer',
path: 'https://storage.googleapis.com/autosync-tire-spins/06026e3d311e72c7df6193ba5efd5f2e',
size: 500,
});
</script>
</body>
</html>
|
ID: Is the id gave it to the container.
PATH: Is the URL or Path where images are stored. All the images used for this library should be named from 1 to 36 and should be WEBP files.
SIZE: Is the size wanted for the viewer the size will be set on pixels.
...