react-glide v4.1.0

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

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:

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