diff options
Diffstat (limited to 'docs/src/experimentals/viewer-360.pug')
| -rw-r--r-- | docs/src/experimentals/viewer-360.pug | 33 |
1 files changed, 25 insertions, 8 deletions
diff --git a/docs/src/experimentals/viewer-360.pug b/docs/src/experimentals/viewer-360.pug index f17b786..5ab0384 100644 --- a/docs/src/experimentals/viewer-360.pug +++ b/docs/src/experimentals/viewer-360.pug @@ -9,7 +9,7 @@ block variables block docs-content +docs-heading('viewer-360', '360-Degree Viewer') p - small.label.label-primary.mr-2 CSS ONLY + small.label.label-secondary CSS ONLY include ../_layout/_ad-g.pug @@ -20,17 +20,25 @@ block docs-content .column.col-12 .viewer-360 input.viewer-slider.slider(type="range" min="1" max="36" value="1" oninput="this.setAttribute('value', this.value);") - figure.viewer-image(style="background-image:url('https://i.loli.net/2018/11/25/5bfa45b4b3f27.jpg');") + figure.viewer-image(style="background-image:url('https://i.loli.net/2018/11/25/5bfa45b4b3f27.jpg');padding-bottom:37.5%;width:100%;") - p + p.text-center | Photo credits: - a(href="https://microsoft.msafflnk.net/c/1272791/433017/7593?u=https%3A%2F%2Fwww.microsoft.com%2Fen-us%2Fp%2Fsurface-pro-6%2F8zcnc665slq5" target="_blank") Microsoft Surface Pro 6 + a(href="https://microsoft.msafflnk.net/c/1272791/433017/7593?u=https://www.microsoft.com/en-us/p/surface-pro-6/8zcnc665slq5" target="_blank") Microsoft Surface Pro 6 - p - | You will need to use your own product image sprite (all angle of photos in one image) and change the attribute #[code max] to use this component. - p - | The default image number in CSS is #[code 36]. You can change the image number by changing the variable #[code $image-number] in #[code _viewer-360.scss] and re-compiling the CSS. + .docs-demo.columns + .column.col-12 + .viewer-360 + input.viewer-slider.slider(type="range" min="1" max="36" value="1" oninput="this.setAttribute('value', this.value);") + figure.viewer-image(style="background-image:url('https://i.loli.net/2018/11/26/5bfc0ab4a5a4f.jpg');padding-bottom:37.5%;width:100%;") + p.text-center + | Photo credits: + a(href="https://microsoft.msafflnk.net/c/1272791/433017/7593?u=https://www.microsoft.com/en-us/p/surface-studio-2/8SBJXM0M58T4" target="_blank") Microsoft Xbox One X + + p + | You will need to use your own product image sprite (all angle of photos in one image) and set the attribute #[code max] to the image numbers to use this component. + pre.code(data-lang='HTML') code :highlight(lang="html") @@ -39,6 +47,15 @@ block docs-content <figure class="viewer-image" style="background-image:url('...');"></figure> </div> + p + | The default image numbers in CSS are #[code 36]. You can copy the mixin and add more numbers in #[code _viewer-360.scss] and re-compiling the CSS. + + pre.code(data-lang='SCSS') + code + :highlight(lang="scss") + @include viewer-slider-size(36); + @include viewer-slider-size(30); + include ../_layout/_ad-c.pug include ../_layout/_footer.pug
\ No newline at end of file |