Slider77 NPM | npm.io

Slider Component

A component for infinit or scrollable sliding items.

    <Slider
      config={ config }
    >
      { Children }
    </Slider>

Version	Compatibility
0.x	React 18.2+

It also use below libraries as dependencies:

    "classnames": "^2.3.2",
    "emittery": "^1.0.1",
    "lodash": "^4.17.21",
    "mobx": "^6.6.2",
    "mobx-react-lite": "^3.4.0"

Technical Documentation

Installing
Exports
Usage
Scripts

Installing

$ npm install slider7mojos

Exports

The component export is <Slider>. Here's how to use it:

// ES6
import { Slider } from 'slider7mojos'; // <Slider component>

Usage

Simple usage (scrollable):

  <Slider useScroll={true}>
     { children }
  </Slider>

  children: Array<ReactElement>

Use specific config:

 <Slider config={ config } >
     { children }
 </Slider>

 config: {
   infinite?: boolean
   isCenter?: boolean
   activeScaleUp?: boolean
   autoPlay?: boolean
   interval?: number
   showCount?: number
   animateDuration?: number
   minMove?: number
   moveCount?: number
   sliderWidth?: number
   gap?: number
   width?: number
   offset?: number
   rtl?: boolean
}

Add extra css classes:

 <Slider 
     className={rootClassName} 
     wrapperClasssName={listClassName}
     itemClassName={slideClassName} 
     config={ config }
 >
     { children }
 </Slider>

 - className?: string
 - wrapperClasssName?: string
 - itemClassName?: string

Infinite Slider

set infinite=true to have infinity.
If you need the center mode set isCenter=true.
To scale up of the active slide you should use activeScaleUp=true.

 <Slider
      config={ {
        infinite: true,
        isCenter: true,
        activeScaleUp: true,
      } }
  >
     { children }
 </Slider>

Auto play

Use autoPlay=true to move automatically on each 5000ms.
If you need the change the interval time set interval=YOUR_INTERVAL_NUM. The unit is millisecond and it recommended to be bigger than 1000ms.
To change the moving direction on interval you should set rtl=true.

 <Slider
      config={ {
        autoPlay: true,
        interval: 15000,
        rtl: true,
      } }
  >
     { children }
 </Slider>

Sliding effect

The default animation duration of the changing slide is 400ms, which you can change it by animateDuration=YOUR_INTERVAL_NUM. The unit is millisecond and it recommended to be less than 1000ms.
There is a 50px default threshold to prevent small touchs to changing slide, which you can change it by minMove=YOUR_THRESHOLD. The unit is px and it recommended to be bigger than 30px.
The default count of slide changing is 1, which you can change it by moveCount=YOUR_COUNT.

 <Slider
      config={ {
        animateDuration: 400,
        minMove: 100,
        moveCount: 2,
      } }
  >
     { children }
 </Slider>

Sizing

There are 3 ways to render slides:

1. Don't define any config and allow the Slider to use children size and styles.
1. Set bashowCount , gap, and offset to compute the width of children by it's parrent and show count value.
1. Set specific width, gap, and offset.
gap is the gap between slides.
offset is the first and last gap of items.

 <Slider
      config={ {
        showCount: 1,
        offset: 40 ,
        gap: 20,
      } }
  >
     { children }
 </Slider>

Full config sample

 <Slider
      config={ {
        autoPlay: true,
        interval: 15000,
        rtl: false,
        infinite: true,
        isCenter: true,
        activeScaleUp: true,
        animateDuration: 500,
        minMove: 100,
        moveCount: 1,
        showCount: 3,
        offset: 40,
        gap: 20,
      } }
  >
     { children }
 </Slider>