react-jollof-slider
A lightweight, responsive, SSR supported, well tested, React.js slider component with autoplay support (autoplay pauses when an item is hovered). Customizable
Table of contents
Installation
npm
npm install react-jollof-slideryarn
yarn add react-jollof-sliderUsage
Basic Example:
import { JollofSlider, SliderItem } from 'react-jollof-slider'
const items = [1, 2, 3, 4, 5]
function App() {
return (
<div className="App">
<JollofSlider numberOfItems={items.length} isAutoplay isShowArrowNav={false} isShowDotNav>
{items.map((text) => (
<SliderItem key={text}>
<div
style={{
backgroundColor: '#000000',
color: '#c4c4c4',
width: '100%',
height: '18.25rem',
padding: '1rem',
display: 'grid',
placeItems: 'center',
}}
>
<p style={{ fontSize: '2rem' }}>{text}</p>
</div>
</SliderItem>
))}
</JollofSlider>
</div>
)
}
export default AppProps
| Name | Type | Default Value | Description |
|---|---|---|---|
| *numberOfItems | number | Number of items to be displayed in the slider | |
| customWidth | object | {xs:240,sm:340,lg:490} |
The width of individual slider items at different screen sizes. lg: min-width(600px), sm: min-width(370px), xs: screens below 370px width . The width values should be provided in pixels. |
| isAutoplay | boolean | false |
Add autoplay functionality |
| isShowDotNav | boolean | false |
Show navigation with dots which also indicate current slider position |
| isShowArrowNav | boolean | true |
Show buttons for moving slides forward and backward |
| children | node | null |
slider items |
| forwardIcon | node | undefined |
Icon for the forward navigation button |
| backwardIcon | node | undefined |
Icon for the backward navigation button |
| autoPlayInterval | number | 3 |
Interval (in seconds) between slide changes during autoplay. |
| flexgap | number | 16 |
Gap (in pixels) between slider items |
| themeColor | string | #000000 |
color of elements like buttons and indicators in the slider |
