From e2e6cf8c0a7897ff7e550137f36b9cf1da4e4175 Mon Sep 17 00:00:00 2001 From: Yan Zhu Date: Sun, 25 Nov 2018 23:13:46 +0800 Subject: Improve 360-Degree Viewer --- docs/experimentals/viewer-360.html | 21 ++++++++++++++++----- 1 file changed, 16 insertions(+), 5 deletions(-) (limited to 'docs/experimentals') diff --git a/docs/experimentals/viewer-360.html b/docs/experimentals/viewer-360.html index 394db70..fc42330 100644 --- a/docs/experimentals/viewer-360.html +++ b/docs/experimentals/viewer-360.html @@ -217,18 +217,29 @@
-
+
-

- Photo credits: Microsoft Surface Pro 6

-

You will need to use your own product image sprite (all angle of photos in one image) and change the attribute max to use this component.

-

The default image number in CSS is 36. You can change the image number by changing the variable $image-number in _viewer-360.scss and re-compiling the CSS.

+

Photo credits: Microsoft Surface Pro 6

+
+
+
+ +
+
+
+
+

Photo credits: Microsoft Xbox One X

+

You will need to use your own product image sprite (all angle of photos in one image) and set the attribute max to the image numbers to use this component.

<div class="viewer-360">
   <input class="viewer-slider slider" type="range" min="1" max="36" value="1" oninput="this.setAttribute('value', this.value);">
   <figure class="viewer-image" style="background-image:url('...');"></figure>
 </div>
+
+

The default image numbers in CSS are 36 and 30. You can copy the mixin and add more numbers in _viewer-360.scss and re-compiling the CSS.

+ 
@include viewer-slider-size(36);
+@include viewer-slider-size(30);
-- cgit v1.3.1-23-gd82d