A React carousel that uses Glider.js
npm install react-glider-carouselThis package exports a React Component that can be use to create carousels using Glider.js (version 1.6.6).
As the author himself puts it:
> A fast, light-weight, dependency free, responsive, accessible, extendable, native scrolling list with paging controls, methods and events. (< 2.8kb gzipped!)
>
> Demos and full documentation available on Github Pages: https://nickpiscitelli.github.io/Glider.js/
To use this package run yarn add react-glider-carousel or npm install --save react-glider-carousel.
If you want the default styles you also need to download Glider.js stylesheet and reference it in your HTML:
``html`
or JS:
`js`
import './src/glider.css';
Warning
To be able to import the stylesheet in your JavaScript you might need an appropriate way (ie. specific loaders for Webpack).
`js
import GliderComponent from 'react-glider-carousel';
const MyComponent = () => {
return (
Slide 1
Slide 2
Slide 3
Slide 4
)
}
`
You can use the component with the following props
`js
hasDots={boolean}
arrows={{
prev: HTMLElement | string,
next: HTMLElement | string
}}
dots={HTMLElement | string}
// Glider options
settings={{}(see below)}
// eventListeners
gliderLoaded={(event: IGliderEvent) => void}
gliderRefresh={(event: IGliderEvent) => void}
gliderAnimated={(event: IGliderEvent) => void}
gliderAdd={(event: IGliderEvent) => void}
gliderRemove={(event: IGliderEvent) => void}
gliderDestroy={(event: IGliderEvent) => void}
gliderSlideVisible={(event: IGliderEvent) => void}
gliderSlideHidden={(event: IGliderEvent) => void}
>
`
The component prop settings are a mirror of Glider options
`typescript``
{
slidesToShow?: number | string;
slidesToScroll?: number | string;
itemWidth?: number;
exactWidth?: boolean;
scrollLock?: boolean;
scrollLockDelay?: number;
resizeLock?: boolean;
responsive?: IGliderBreakpoint[];
rewind?: boolean;
scrollPropagate?: boolean;
draggable?: boolean;
dragVelocity?: number;
duration?: number;
propagateEvent?: boolean;
skipTrack?: boolean;
}