A react wrapper for glider.js
yarn
yarn storybook
To use the CSS for glider.js in your app either include the css in your head.
<link
rel="stylesheet"
href="https://unpkg.com/[email protected]/glider.min.css"
/>
or just include it in your project if it is set up for that.
import 'glider-js/glider.min.css';
This package also exposes the CSS used to render the demo.
import Glider from 'react-glider/glider.defaults.css';
The CSS for the perspective view is not included in glider.js
or this package. You can find it in .storybook/preview-head.html
in the style
tag. Please do not file bugs for it as I do not want to support it.
To get access to the current glider instance this react component exposes a ref.
import React from 'react';
import Glider, { GliderMethods } from 'react-glider';
const PaneExample: React.FC<PaneProps> = ({ children, style, className }) => (
<div className={`glider-slide ${className}`} style={style}>
<h1>{children}</h1>
</div>
);
const example = () => {
const gliderRef = React.useRef<GliderMethods>(null);
return (
<>
<button onClick={() => gliderRef.current?.destroy()}>Destroy!</button>
<Glider ref={gliderRef}>
<PaneExample>1</PaneExample>
<PaneExample>2</PaneExample>
<PaneExample>3</PaneExample>
<PaneExample>4</PaneExample>
</Glider>
</>
);
};
Thanks goes to these wonderful people (emoji key):
Andrew Lisowski ๐ป ๐จ ๐ ๐ ๐ง |
Adam Misiorny ๐ป |
zeelMT ๐ป |
vinkodlak ๐ป |
stanislavvasilyev-sravni ๐ป |
Kevin Farrugia ๐ป |
hotscotch92 ๐ป |
Moe Shaaban ๐ ๐ป |
This project follows the all-contributors specification. Contributions of any kind welcome!