Implement carousel (#605)

Add type declaration

web/samples_index/web/description.dart

@@ -1,9 +1,15 @@
 import 'dart:html';
 
 import 'package:mdc_web/mdc_web.dart';
+import 'package:samples_index/src/carousel.dart';
 
 InputElement searchInput;
 
 void main() {
   querySelectorAll('.mdc-card__primary-action').forEach((el) => MDCRipple(el));
+
+  // Initialize carousel
+  // This carousel will use the div slider-container as the base
+  // withArrowKeyControl is used to listen for arrow key up events
+  Carousel.init(withArrowKeyControl: true);
 }

web/samples_index/web/styles.scss

@@ -41,6 +41,29 @@ $font: Roboto, sans-serif;
 $title-font: Google Sans Display, Roboto, sans-serif;
 $subtitle-font: Google Sans, Roboto, sans-serif;
 
+// Carousel Animation Configs
+$time: 500ms;
+$delay: $time/2;
+$mode: cubic-bezier(0.17, 0.67, 0.55, 1.43);
+
+@keyframes heartbeat {
+  0% {
+    transform: scale(0);
+  }
+  25% {
+    transform: scale(1.2);
+  }
+  50% {
+    transform: scale(1);
+  }
+  75% {
+    transform: scale(1.2);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+
 // CSS Reset
 html, body {
   height: 100%;
@@ -101,7 +124,8 @@ a {
 // Custom Styles
 .content {
   min-height: 100%;
-  >.container {
+
+  > .container {
     padding-bottom: $footer-height;
   }
 }
@@ -133,6 +157,7 @@ a {
     display: flex;
     flex-direction: row;
     align-items: center;
+
     > * {
       margin: 0 8px 3px 8px; // adjusted vertically to align flutter logo text with "Samples" text
     }
@@ -229,8 +254,8 @@ a {
   img {
     border-radius: 8px;
     margin: 0 8px 0 8px;
-    max-width:100%;
-    max-height:100%;
+    max-width: 100%;
+    max-height: 100%;
   }
 }
 
@@ -354,6 +379,7 @@ a {
   display: flex;
   flex-direction: row;
   align-items: center;
+
   h1 {
     margin-right: 8px;
   }
@@ -361,6 +387,7 @@ a {
 
 .tags-container {
   max-width: 400px;
+
   .tags-label {
     color: $dark-text-color;
     display: flex;
@@ -370,7 +397,8 @@ a {
     text-transform: uppercase;
     font-weight: bold;
     margin-bottom: 6px;
-    >span{
+
+    > span {
       margin-left: 4px;
     }
   }
@@ -396,3 +424,143 @@ a {
     }
   }
 }
+
+// Carousel Container
+.slider-container {
+  position: relative;
+  margin: 0 auto;
+  width: 800px;
+  height: 600px;
+  max-width: 100%;
+  margin-top: -80px;
+  margin-bottom: -60px;
+
+  .bullet-container {
+    position: absolute;
+    bottom: 80px;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    .bullet {
+      margin-right: 8px;
+
+      &:last-child {
+        margin-right: 0px;
+      }
+
+      height: 8px;
+      width: 18px;
+      border-radius: 8px;
+      background-color: black;
+      opacity: 0.2;
+      cursor: pointer;
+      transition: 40ms ease;
+
+      &.active {
+        opacity: 1;
+      }
+    }
+  }
+
+  .slider-content {
+    position: relative;
+    left: 50%;
+    top: 50%;
+    width: 70%;
+    height: 60%;
+    transform: translate(-50%, -50%);
+
+    .slider-single {
+      position: absolute;
+      z-index: 0;
+      left: 0;
+      top: 0;
+      width: 100%;
+      height: 100%;
+      transition: z-index 0ms $delay;
+
+      .slider-single-image {
+        position: relative;
+        left: 0;
+        top: 0;
+        width: 100%;
+        height: 100%;
+        object-fit: contain;
+        transition: $time $mode;
+        transform: scale(0);
+        opacity: 0;
+      }
+
+      &.prev-hidden {
+        .slider-single-image {
+          transform: translateX(-50%) scale(0);
+        }
+      }
+
+      &.prev {
+        z-index: 1;
+
+        .slider-single-image {
+          opacity: 0.2;
+          transform: translateX(-25%) scale(0.8);
+        }
+      }
+
+      &.next {
+        z-index: 1;
+
+        .slider-single-image {
+          opacity: 0.2;
+          transform: translateX(25%) scale(0.8);
+        }
+      }
+
+      &.next-hidden {
+        .slider-single-image {
+          transform: translateX(50%) scale(0);
+        }
+      }
+
+      &.active {
+        z-index: 2;
+
+        .slider-single-image {
+          opacity: 1;
+          transform: translateX(0%) scale(1);
+        }
+      }
+    }
+  }
+
+  .slider-left {
+    position: absolute;
+    z-index: 3;
+    display: block;
+    right: 100%;
+    top: 50%;
+    color: black;
+    transform: translateY(-50%);
+    padding: 20px 20px;
+    margin-right: -2px;
+    cursor: pointer;
+  }
+
+  .slider-right {
+    position: absolute;
+    z-index: 3;
+    display: block;
+    left: 100%;
+    top: 50%;
+    color: black;
+    transform: translateY(-50%);
+    padding: 20px 20px;
+    margin-left: -2px;
+    cursor: pointer;
+  }
+
+  .hidden {
+    display: none !important;
+  }
+}