diff options
1 files changed, 33 insertions, 0 deletions
| -rw-r--r-- | src/_viewer-360.scss | 33 |
diff --git a/src/_viewer-360.scss b/src/_viewer-360.scss new file mode 100644 index 0000000..add0cf6 --- /dev/null +++ b/src/_viewer-360.scss @@ -0,0 +1,33 @@ +// 360 Degree Viewer +// The number of images +$image-height: 9rem; +$image-number: 36 !default; +$image-width: 24rem; + +.viewer-360 { + align-items: center; + display: flex; + flex-direction: column; + + @for $s from 1 through ($image-number) { + .viewer-slider[value='#{$s}'] + .viewer-image { + background-position-y: percentage((($s)-1) * 1/(($image-number)-1)); + } + } + + .viewer-slider { + cursor: ew-resize; + margin: 1rem; + order: 2; + width: 60%; + } + + .viewer-image { + background-position-y: 0; + background-repeat: no-repeat; + background-size: 100%; + height: $image-height; + order: 1; + width: $image-width; + } +} |