js-cloudimage-360-view
Watch Star Fork Tweet

Show every detail from any angle

Engage your customers with a stunning 360 view of your products

View on GitHub Edit on CodeSandbox
Fork me on GitHub

36 images, autoplay, bottom 360 view circle, arrow keys support, inner box shadow

More examples

A simple, interactive resource that can be used to provide a virtual tour of your product.

72 images

36 images

36 images, full screen

36 images, magnifier

36 images, bottom 360 view circle

36 images, bottom 360 view circle, box-shadow

72 images, bottom 360 view circle, autoplay

36 images, bottom 360 view circle, autoplay

36 images, bottom 360 view circle, autoplay, autoplay reverse

Ready to get started?

Include the following script into your project after all content in body tag


<script src="https://cdn.scaleflex.it/filerobot/js-cloudimage-360-view/v2.0.0.min.js"></script>

Configure 360 view component with class="cloudimage-360", folder path, filename, and amount of images

<div>
   class="cloudimage-360"
   data-folder="https://scaleflex.cloudimg.io/crop/1920x700/n/https://scaleflex.airstore.io/demo/360-car/"
   data-filename="iris-{index}.jpeg"
   data-amount="36"
></div>

…and you're done! Visit the full documentation here.

Any questions?

Contact us at hello@cloudimage.io, our experts will be happy to help!

Filerobot UI family:
  • JS Cloudimage Responsive
  • React Cloudimage Responsive
  • Angular Cloudimage Responsive
  • Uploader
  • Image Editor

Made with ❤ in 2019 in Paris, Munich and Sofia by the Scaleflex team, the guys behind Cloudimage.io.
Powered by Scaleflex team. All rights reserved.
  • View GitHub
  • Current Issues
  • Documentation