diff options
Diffstat (limited to 'packages/website')
| -rw-r--r-- | packages/website/package.json | 1 | ||||
| -rw-r--r-- | packages/website/ts/@next/components/slider/slider.tsx | 71 |
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; |