react-jollof-slider v0.1.4

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
• Usage
• Props
• Demo

Installation

npm

npm install react-jollof-slider

yarn

yarn add react-jollof-slider

Usage

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 App

Props

Demo