js-slider v0.1.25

Slider

Beautiful slider for React

Demo

https://user-images.githubusercontent.com/107611589/222640699-2c32bfe6-2ae9-473b-b45f-f4ca41f96a71.mov

Install

npm install -s js-slider

Usage

For general

import {JSSlider} from 'js-slider'
import {JSSliderData} from 'js-slider/dist/cjs/src/lib/JSSlider'

...

const stateEl = useRef<HTMLButtonElement>(null)

const itemList: JSSliderData[] = [
  {order: 1, image: '/image8.png'},
  {order: 2, image: '/image9.png'},
  {order: 3, image: '/image10.png'},
]

...

<JSSlider
  items={itemList}
  stateButton={stateEl.current}
  duration={200}
  interval={5000}
  onChangeItem={console.log}
  onChangeState={console.log}
/>
<button ref={stateEl}>Toggle State</button>

For React development environment

This feature is for About useEffect called twice issue in React 18

<JSSlider
  ...
  startEffect="useEffectOnce"
 />

or

const useEffectOnce = (callback: React.EffectCallback, dependencyList: React.DependencyList | undefined) => {
  ...
}

...

<JSSlider
  ...
  startEffect={useEffectOnce}
 />

Properties

type JSSliderData = {
  image: string
  order: number
  /** image styles */
  backgroundColor?: Property.BackgroundColor
  objectFit?: Property.ObjectFit
} & ({
  link: string
  newTab?: boolean
} | {
  link?: never
  newTab?: never
})

(callback: React.EffectCallback, dependencyList: React.DependencyList | undefined) => void