quickFix: autoplay on mobile

scaleflex · Feb 23, 2022 · d67c528 · d67c528
1 parent 08b8a4a
commit d67c528
Show file tree

Hide file tree

Showing 3 changed files with 3 additions and 3 deletions.
diff --git a/examples/src/index.html b/examples/src/index.html
@@ -161,7 +161,6 @@ <h2>Engage your customers with a stunning <strong>360 view of your products</str
        data-ratio="1.7"
        data-responsive="scaleflex"
        data-spin-reverse
-       data-info
     ></div>
     <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>

diff --git a/examples/src/mobile.init.js b/examples/src/mobile.init.js
@@ -17,6 +17,6 @@ if (isMobile) {
     'data-folder',
     'https://scaleflex.cloudimg.io/v7/https://cdn.scaleflex.it/demo/360-car/'
   );
-  mercedes360View.setAttribute('data-ratio', '0.666');
+  mercedes360View.setAttribute('data-ratio', '1.7');
   mercedes360View.setAttribute('data-bottom-circle-offset', '22');
 }
diff --git a/src/ci360.service.js b/src/ci360.service.js
@@ -730,7 +730,6 @@ import {
     const responsive = this.ciParams.ciToken;
     const firstImage = this.imagesX[0];
 
-    this.updateContainerAndCanvasSize(firstImage);
     this.update();
 
     this.speedFactor = getSpeedFactor(this.dragSpeed, this.amountX, this.container.offsetWidth);
@@ -766,6 +765,7 @@ import {
 
     const ctx = this.canvas.getContext("2d");
     ctx.scale(this.devicePixelRatio, this.devicePixelRatio);
+    this.updateContainerAndCanvasSize(image);
 
     if (this.fullscreenView) {
       const { width, height, offsetX, offsetY } =
@@ -785,6 +785,7 @@ import {
             this.movingDirection
           );
         }
+
         ctx.drawImage(image, 0, 0, this.canvas.width, this.canvas.height);
       }
     }