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.
• 2. Set showCount , gap, and offset to compute the width of children by it's parrent and show count value.
• 3. 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>

Scripts

In the project directory, you can run:

npm test

Launches the test runner in the interactive watch mode.
See the section about running tests for more information.

npm run publish

Change the version of package in the package.json and the run the command to build and publish the new version of the library.

npm run build

Builds the app to see the publish files on the dist folder.

Your app is ready to be deployed!

License

7Mojos