Merge pull request #536 from picturepan2/0.5.7 v0.5.7

0.5.7

1 files changed, 22 insertions, 12 deletions

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;
+      }
     }
   }