From 38fd80e7a02a158dce1ba1edb4d6144e2325585a Mon Sep 17 00:00:00 2001
From: Yan Zhu <picturepan2@hotmail.com>
Date: Sun, 25 Nov 2018 16:48:28 +0800
Subject: Change Carousels image number to variable #428

---
 src/_carousels.scss  | 34 ++++++++++++++++++++++------------
 src/_viewer-360.scss |  2 +-
 2 files changed, 23 insertions(+), 13 deletions(-)

(limited to 'src')

diff --git a/src/_carousels.scss b/src/_carousels.scss
index 5b4eaf5..66dc51b 100644
--- a/src/_carousels.scss
+++ b/src/_carousels.scss
@@ -1,4 +1,17 @@
 // Carousels
+// The number of carousel images
+$carousel-number: 8;
+
+%carousel-image-checked { 
+  animation: carousel-slidein .75s ease-in-out 1;
+  opacity: 1;
+  z-index: $zindex-1;
+}
+
+%carousel-nav-checked { 
+  color: $gray-color-light;
+}
+
 .carousel {
   background: $bg-color;
   display: block;
@@ -57,19 +70,16 @@
   }
 
   .carousel-locator {
-    &:nth-of-type(1):checked ~ .carousel-container .carousel-item:nth-of-type(1),
-    &:nth-of-type(2):checked ~ .carousel-container .carousel-item:nth-of-type(2),
-    &:nth-of-type(3):checked ~ .carousel-container .carousel-item:nth-of-type(3),
-    &:nth-of-type(4):checked ~ .carousel-container .carousel-item:nth-of-type(4) {
-      animation: carousel-slidein .75s ease-in-out 1;
-      opacity: 1;
-      z-index: $zindex-1;
+    @for $i from 1 through ($carousel-number) {
+      &:nth-of-type(#{$i}):checked ~ .carousel-container .carousel-item:nth-of-type(#{$i}) {
+        @extend %carousel-image-checked;
+      }
     }
-    &:nth-of-type(1):checked ~ .carousel-nav .nav-item:nth-of-type(1),
-    &:nth-of-type(2):checked ~ .carousel-nav .nav-item:nth-of-type(2),
-    &:nth-of-type(3):checked ~ .carousel-nav .nav-item:nth-of-type(3),
-    &:nth-of-type(4):checked ~ .carousel-nav .nav-item:nth-of-type(4) {
-      color: $gray-color-light;
+
+    @for $i from 1 through ($carousel-number) {
+      &:nth-of-type(#{$i}):checked ~ .carousel-nav .nav-item:nth-of-type(#{$i}) {
+        @extend %carousel-nav-checked;
+      }
     }
   }
 
diff --git a/src/_viewer-360.scss b/src/_viewer-360.scss
index 8d5fd61..332fba4 100644
--- a/src/_viewer-360.scss
+++ b/src/_viewer-360.scss
@@ -1,5 +1,5 @@
 // 360 Degree Viewer
-// The number of images options 
+// The number of images 
 $image-height: 9rem;
 $image-number: 36 !default;
 $image-width: 24rem;
-- 
cgit v1.3.1-23-gd82d