A React wrapper for glide.js.
npm install --save react-glidejsOR
yarn add react-glidejs
A lightweight React wrapper for Glide.js by @jedrzejchalubek. React-glidejs exposes all the options from the Glide.js API as props. View them all here: https://glidejs.com/docs/options/
Import the Glide component. Every React node (either a DOM element or a JSX
Fragment) is treated as a slide. Some additional props have also been
added for easier customisation, e.g.leftArrowComponent and
rightArrowComponent props which accept a React node.
The goal is to keep the API surface as small and lightweight as possible, while
also providing an easy way for customisation in line with common React
patterns. Therefore, this library uses react-transition-group under the hood
to provide an easy way to add custom slide animations.
import React, { useRef } from 'react';
import Glide, { Slide } from 'react-glidejs';
import 'react-glidejs/dist/index.css';
import './transitions.css';
export default () => {
const gliderRef = useRef(null);
return (
<div
className="App"
style={{
background: '#1B262C',
}}
>
<Glide
ref={gliderRef}
throttle={0}
type="slider"
customSlideAnimation={{
timeout: 500,
classNames: 'fade',
}}
peek={{
before: 500,
after: 500,
}}
perView={1}
startAt={3}
slideClassName="slider__frame"
focusAt="center"
>
<Fragment>
1
</Fragment>
<Fragment>
2
</Fragment>
<Fragment>
3
</Fragment>
<Fragment>
4
</Fragment>
<Fragment>
5
</Fragment>
<Fragment>
6
</Fragment>
<Fragment>
7
</Fragment>
<Fragment>
8
</Fragment>
<Fragment>
9
</Fragment>
<Fragment>
10
</Fragment>
<Fragment>
11
</Fragment>
<Fragment>
12
</Fragment>
<Fragment>
13
</Fragment>
<Fragment>
14
</Fragment>
</Glide>
</div>
);
};MIT © jkhaui
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent