A React wrapper for Glider.js.

Storybook playground available on GitHub pages: https://hipstersmoothie.github.io/react-glider/

npm -i -s react-glider

import * as React from 'react';

import Glider from 'react-glider';
import 'glider-js/glider.min.css';

<Glider
  draggable
  hasArrows
  hasDots
  slidesToShow={2}
  slidesToScroll={1}
>
  <Pane>1</Pane>
  <Pane>2</Pane>
  <Pane>3</Pane>
  <Pane>4</Pane>
  <Pane>5</Pane>
</Glider>

To use the CSS for Glider.js in your app either include the CSS file in your head:

<link
  rel="stylesheet"
  href="https://unpkg.com/[email protected]/glider.min.css"
/>

or import it into your project from the npm module.

import 'glider-js/glider.min.css';

This package also exposes the CSS used to render the demo which may also be imported as follows:

import Glider from 'react-glider/glider.defaults.css';

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>
    </>
  );
};

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.

yarn
yarn storybook

Thanks goes to these wonderful people (emoji key):

Andrew Lisowski 💻 🎨 📖 🚇 🚧	Adam Misiorny 💻	zeelMT 💻 📖	vinkodlak 💻	stanislavvasilyev-sravni 💻	Kevin Farrugia 💻 📖	hotscotch92 💻
Moe Shaaban 📖 💻	Cameron Braid 💻

This project follows the all-contributors specification. Contributions of any kind welcome!