Add 360-Degree Viewer

2 files changed, 34 insertions, 0 deletions

diff --git a/src/_viewer-360.scss b/src/_viewer-360.scss
new file mode 100644
index 0000000..8d5fd61
--- /dev/null
+++ b/src/_viewer-360.scss
@@ -0,0 +1,33 @@
+// 360 Degree Viewer
+// The number of images options 
+$image-height: 9rem;
+$image-number: 36 !default;
+$image-width: 24rem;
+
+.viewer-360 {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  
+  @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;
+  }
+}
diff --git a/src/spectre-exp.scss b/src/spectre-exp.scss
index 9ba75ff..33ed3fe 100644
--- a/src/spectre-exp.scss
+++ b/src/spectre-exp.scss
@@ -15,3 +15,4 @@
 @import "progress";
 @import "sliders";
 @import "timelines";
+@import "viewer-360";