Improve 360-Degree Viewer

2 files changed, 16 insertions, 14 deletions

diff --git a/src/_variables.scss b/src/_variables.scss
index e8c846c..d268265 100644
--- a/src/_variables.scss
+++ b/src/_variables.scss
@@ -1,5 +1,5 @@
 // Core variables
-$version: "0.5.7";
+$version: "0.5.8";
 
 // Core features
 $rtl: false !default;
diff --git a/src/_viewer-360.scss b/src/_viewer-360.scss
index add0cf6..b24f1f8 100644
--- a/src/_viewer-360.scss
+++ b/src/_viewer-360.scss
@@ -1,19 +1,22 @@
 // 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;
-  
+// Mixin: Viewer slider sizes
+@mixin viewer-slider-size($image-number: 36) {
   @for $s from 1 through ($image-number) {
-    .viewer-slider[value='#{$s}'] + .viewer-image {
+    .viewer-slider[max='#{$image-number}'][value='#{$s}'] + .viewer-image {
       background-position-y: percentage((($s)-1) * 1/(($image-number)-1));
     }
   }
+}
+
+.viewer-360 {
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+
+  // Copy and add more numbers if you need
+  @include viewer-slider-size(36);
+  @include viewer-slider-size(30);
 
   .viewer-slider {
     cursor: ew-resize;
@@ -26,8 +29,7 @@ $image-width: 24rem;
     background-position-y: 0;
     background-repeat: no-repeat;
     background-size: 100%;
-    height: $image-height;
+    max-width: 100%;
     order: 1;
-    width: $image-width;
   }
-}
+}
\ No newline at end of file