Tweak slider

2 files changed, 69 insertions, 3 deletions

diff --git a/packages/website/package.json b/packages/website/package.json
index 9e1d97508..5a0e5f7df 100644
--- a/packages/website/package.json
+++ b/packages/website/package.json
@@ -57,6 +57,7 @@
         "react-copy-to-clipboard": "^5.0.0",
         "react-document-title": "^2.0.3",
         "react-dom": "^16.4.2",
+        "react-flickity-component": "^3.1.0",
         "react-headroom": "^2.2.4",
         "react-helmet": "^5.2.0",
         "react-lazyload": "^2.3.0",
diff --git a/packages/website/ts/@next/components/slider/slider.tsx b/packages/website/ts/@next/components/slider/slider.tsx
index 6292a8c9e..10428df90 100644
--- a/packages/website/ts/@next/components/slider/slider.tsx
+++ b/packages/website/ts/@next/components/slider/slider.tsx
@@ -1,4 +1,5 @@
 import * as React from 'react';
+import Flickity from 'react-flickity-component'
 import styled from 'styled-components';
 
 import { colors } from 'ts/style/colors';
@@ -16,6 +17,13 @@ interface SlideProps {
     href?: string;
 }
 
+const flickityOptions = {
+    initialIndex: 0,
+    cellAlign: 'left',
+    arrowShape: 'M0 50.766L42.467 93.58l5.791-5.839-32.346-32.61H100V46.84H15.48L50.2 11.838 44.409 6 5.794 44.93l-.003-.003z',
+    prevNextButtons: true,
+};
+
 export const Slide: React.StatelessComponent<SlideProps> = (props: SlideProps) => {
     const { heading, text, href, icon } = props;
 
@@ -35,17 +43,69 @@ export const Slide: React.StatelessComponent<SlideProps> = (props: SlideProps) =
 export const Slider: React.StatelessComponent<SliderProps> = props => {
     return (
         <StyledSlider>
-            <SliderInner>
+            <Flickity
+                className={'carousel'} // default ''
+                elementType={'div'} // default 'div'
+                options={flickityOptions} // takes flickity options {}
+                disableImagesLoaded={false} // default false
+            >
                 {props.children}
-            </SliderInner>
+            </Flickity>
         </StyledSlider>
     );
 };
 
 const StyledSlider = styled.div`
-    overflow: hidden;
+    //overflow: hidden;
     width: 100%;
     height: 520px;
+    .carousel {
+        position: relative;
+        display: block;
+        user-select: none;
+        touch-action: pan-y;
+        -webkit-tap-highlight-color: transparent;
+        outline: none;
+    }
+
+    .flickity-viewport {
+        outline: none;
+    }
+
+    .flickity-button {
+        position: absolute;
+        width: 74px;
+        height: 74px;
+        background-color: #000;
+        display: flex;
+        outline: 0;
+        top: calc(50% - 37px);
+        border: 0;
+        padding: 0;
+
+        &:disabled {
+            opacity: 0;
+            visibility: hidden;
+        }
+
+        &.previous {
+            left: 0;
+        }
+
+        &.next {
+            right: 0;
+        }
+
+        svg {
+            margin: auto;
+            width: 28px;
+            height: auto;
+        }
+
+        path {
+            fill: #fff;
+        }
+    }
 `;
 
 const SliderInner = styled.div`
@@ -59,6 +119,11 @@ const StyledSlide = styled.div`
     width: 560px;
     height: 520px;
     flex: 0 0 auto;
+    opacity: 0.3;
+
+    &.is-selected {
+        opacity: 1;
+    }
 
     & + & {
         margin-left: 30px;