Skip to content

andrewangelle/react-glide

master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

react-glide

A lightweight, multi-purpose carousel component for React.

npm version CircleCI

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 the example app at http://localhost:3000:

$ npm start

Run tests in watch mode:

$ npm run test

Execute a single run of tests:

$ npm run test:once

License

MIT

About

a multi purpose carousel module built in React

Resources

Stars

Watchers

Forks

Packages

No packages published