How to Create a 360 Product View Using JavaScript | JS Cloudimage

Cloud image 360 View is a simple, interactive resource that can be used to provide a virtual tour of your product. Attract your customers with a stunning 360 display of your products.

360 degree product image rotation in javascript, 360 degree product view html5, 360 image viewer javascript, 360 degree image rotation in html5, 360 degree panoramic view plugin for jquery

Autoplay (desktop only), Circle bottom 360 degree view, Arrow keys support (desktop only), Magnifier (desktop only), Inner box-shadow, 360 product view examples

How to make use of it:

Import the js-cloudimage-360-view library into the doc.

<script src="/path/to/version.min.js"></script>

To allow picture lazy load, load a third lazy load library within the doc.

<script src="/path/to/lazysizes.min.js"></script>
<script src="/path/to/yall.min.js"></script>
<script src="/path/to/lozad.min.js"></script>

Add the CSS class cloudimage-360 to the container through which you need to place the picture viewer.

<div class="cloudimage-360"></div>

Specify the path to the picture folder.

<div class="cloudimage-360"
     data-folder="./product/">
</div>

Specify the file identify and variety of product photos.

<div class="cloudimage-360"
     data-folder="./product/"
     data-filename="product-{index}.jpeg"
     data-amount="60">
</div>

API strategies.

window.CI360.destroy();
window.CI360.init();

360º Product View In JavaScript, Cloudimage 360 View Plugin, JS Cloudimage 360 View Github, 360 product viewer, js cloudimage 360 view

See Demo And Download