Add Carousels previous and next buttons

1 files changed, 33 insertions, 18 deletions

diff --git a/src/carousels.less b/src/carousels.less
index e826840..6b39cf6 100644
--- a/src/carousels.less
+++ b/src/carousels.less
@@ -11,7 +11,6 @@
     height: 100%;
     left: 0;
     position: relative;
-    //animation: carousel-autoplay 15s infinite;
 
     .carousel-item {
       animation: carousel-slideout 1s 1;
@@ -22,6 +21,32 @@
       position: absolute;
       top: 0;
       width: 100%;
+
+      &:hover {
+        .item-prev,
+        .item-next {
+          opacity: 1;
+        }
+      }
+    }
+
+    .item-prev,
+    .item-next {
+      background: fade(@light-gray-color, 25%);
+      border-color: fade(@light-gray-color, 50%);
+      color: @light-gray-color;
+      opacity: 0;
+      position: absolute;
+      top: 50%;
+      transition: all .4s ease;
+      transform: translateY(-50%);
+      z-index: 99;
+    }
+    .item-prev {
+      left: 2rem;
+    }
+    .item-next {
+      right: 2rem;
     }
   }
 
@@ -74,6 +99,12 @@
       }
     }
   }
+
+  &.carousel-autoplay {
+    .carousel-item {
+      //animation: carousel-autoplay .15s infinite;
+    }
+  }
 }
 
 @supports (object-fit: cover) {
@@ -86,23 +117,6 @@
   }
 }
 
-@keyframes carousel-autoplay {
-  0% {
-    transform: translateX(0);
-  }
-  25% {
-    transform: translateX(-25%);
-  }
-  50% {
-    transform: translateX(-50%);
-  }
-  75% {
-    transform: translateX(-75%);
-  }
-  100% {
-    transform: translateX(0);
-  }
-}
 @keyframes carousel-slidein {
   0% {
     transform: translateX(100%);
@@ -111,6 +125,7 @@
     transform: translateX(0);
   }
 }
+
 @keyframes carousel-slideout {
   0% {
     opacity: 1;