"360° Image Viewer "
Bootstrap 4.1.1 Snippet by trinhquan

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <script src="https://scaleflex.cloudimg.io/v7/plugins/js-cloudimage-360-view/latest/js-cloudimage-360-view.min.js"></script> <h1>Product Viewer</h1> <div class="container"> <div id="gurkha-suv" class="cloudimage-360" data-folder="https://scaleflex.cloudimg.io/v7/demo/360-nike/" data-filename-x="nike-{index}.jpg" data-amount-x="35" data-speed="100" data-drag-speed="120" data-filename-y="nike-y-{index}.jpg" data-amount-y="36" data-autoplay-behavior="spin-xy" data-autoplay ></div> </div> <div class="col-12 copy-right text-center">© Friday, March 1, 2024 quanth</div>
h1 { text-align: center; margin-top: 30px; margin-bottom: 30px; } .container { width: 500px; margin: auto; }
window.CI360.init(); window.CI360.add('gurkha-suv'); window.CI360.update('gurkha-suv');

Related: See More


Questions / Comments: