aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website
diff options
context:
space:
mode:
Diffstat (limited to 'packages/website')
-rw-r--r--packages/website/package.json1
-rw-r--r--packages/website/ts/@next/components/slider/slider.tsx71
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;