Merge pull request #551 from picturepan2/0.5.8 v0.5.8

0.5.8

1 files changed, 14 insertions, 13 deletions

diff --git a/src/_viewer-360.scss b/src/_viewer-360.scss
index add0cf6..c1b8928 100644
--- a/src/_viewer-360.scss
+++ b/src/_viewer-360.scss
@@ -1,19 +1,21 @@
 // 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);
 
   .viewer-slider {
     cursor: ew-resize;
@@ -26,8 +28,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