react-glide

A lightweight, multi-purpose carousel component for React.

demo

Installation

$ npm install react-glide

Usage

Import the module at the top of your component page:

import { Glide } from 'react-glide';
import 'react-glide/lib/reactGlide.css'

Glide functions as a wrapper and can be passed any type of element. See example folder:

<Glide height={500} width={500}>
  <img src='http:/path/to/image/url' />
  <img src='http:/path/to/image/url2' />
  <img src='http:/path/to/image1/url3' />
</Glide>

Options

Types

interface GlideProps {
  autoPlay?: boolean;
  autoPlaySpeed?: number;
  dots?: boolean;
  height?: number;
  infinite?: boolean;
  width: number;
  onSlideChange?: () => void;
}

Props Description

| option | type | description | default | required | |------------ |-----------|---------------------------------------|---------|-----------| |width |integer | the width of the carousel container. | none | Yes | |height |integer | the height of the carousel container. | none | No | |autoPlay |bool | enables or disables autoPlay feature.| false | No | |autoPlaySpeed |integer | the rate of change between slides, defined in ms.| 2000 | No | |infinite |bool | carousel will loop infinitely | true | No | |dots |bool | dot navigation & pagination | true | No | |onSlideChange |func | a function that will fire when the slide changes | none | No |

Styles

Default Styles

To use the default styles, import the CSS from react-glide at the top of your file:

import 'react-glide/lib/reactGlide.css';

Overriding Default Styles

in order to fit the design of your project, you can override the default styles by using the class names below in your projects own stylesheet:

| element | class name | |------------ |-----------| | containers | .glide--container | | | .glide--item| | | .glide--item.current | | buttons | .glide--next-btn | | | .glide--prev-btn| | dots | .glide--dots | | | .glide--dots-active | | | .glide--dots-inactive |

Development

Install dependencies:

$ npm install

Run storybook at http://localhost:6006:

$ npm start

Run ssr test app at http://localhost:3000:

$ cd ./ssr-testing && npm i && npm start

Run tests in watch mode:

$ npm run test

Execute a single run of tests:

$ npm run test:once

Run linter check:

$ npm run lint:check

Run linter auto fix:

npm run lint:fix

License

MIT