update demo to make it more responsible for mobile devices;

examples/src/index.html

@@ -100,6 +100,7 @@ <h2>Engage your customers with a stunning <strong>360 view of your products</str
   <!--</div>-->
   <section class="main-360-spin">
     <div
+       id="mercedes-360-view"
        class="cloudimage-360"
        data-folder="https://scaleflex.cloudimg.io/crop/1920x700/n/https://scaleflex.airstore.io/demo/360-car/"
        data-filename="iris-{index}.jpeg"
@@ -114,7 +115,7 @@ <h2>Engage your customers with a stunning <strong>360 view of your products</str
        data-responsive="demo"
        data-spin-reverse
     ></div>
-    <p class="view-360-capture">36 images, autoplay, bottom 360 view circle, arrow keys support, inner box shadow</p>
+    <p class="view-360-capture">36 images, autoplay (desktop only), bottom 360 view circle, arrow keys support (desktop only),  magnifier (desktop only), inner box shadow</p>
   </section>
 
   <section class="container ready-to-start">
@@ -179,7 +180,7 @@ <h2 class="text-center">More examples</h2>
              data-responsive="demo"
           ></div>
         </div>
-        <p class="view-360-capture">36 images, magnifier</p>
+        <p class="view-360-capture">36 images, magnifier (desktop only)</p>
       </div>
     </div>
 
@@ -215,7 +216,7 @@ <h2 class="text-center">More examples</h2>
         </div>
         <p class="view-360-capture">36 images, bottom 360 view circle, box-shadow</p>
       </div>
-      <div class="row" style="margin-top: 40px;">
+      <div class="row no-mobile" style="margin-top: 40px;">
         <div class="col-md-4">
           <div style="max-width: 1000px;">
             <div

examples/src/index.js

@@ -1,3 +1,4 @@
+import './mobile.init';
 import '../../src';
 import './style.css';
 import './assets/fonts/helvetica-neue.css';

examples/src/mobile.init.js

@@ -0,0 +1,22 @@
+import MobileDetect from 'mobile-detect';
+
+
+const md = new MobileDetect(window.navigator.userAgent);
+const isMobile = md.mobile();
+
+if (isMobile) {
+  const elementsToHide = document.querySelectorAll('.no-mobile');
+  const mercedes360View = document.getElementById('mercedes-360-view');
+
+  for (let i = 0; elementsToHide.length > i; i++ ) {
+    const elem = elementsToHide[i];
+    elem.parentNode.removeChild(elem);
+  }
+
+  mercedes360View.setAttribute(
+    'data-folder',
+    'https://scaleflex.cloudimg.io/crop/600x400/n/https://scaleflex.airstore.io/demo/360-car/'
+  );
+  mercedes360View.setAttribute('data-ratio', '0.666');
+  mercedes360View.setAttribute('data-bottom-circle-offset', '22');
+}

package.json

@@ -48,6 +48,7 @@
     "gh-pages": "^2.0.1",
     "highlight.js": "^9.15.6",
     "html-webpack-plugin": "^3.2.0",
+    "mobile-detect": "^1.4.3",
     "style-loader": "^0.23.1",
     "webpack": "^4.29.6",
     "webpack-cli": "^3.3.0",