js-swiper v1.0.2

Swiper

Beautiful swiper for React

Demo

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

Install

npm install js-swiper

Usage

For general

import {JSSwiper} from 'js-swiper'
import {JSSwiperData} from 'js-swiper/dist/cjs/src/lib/JSSwiper'

...

const stateEl = useRef<HTMLButtonElement>(null)

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

...

<JSSwiper
  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

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

or

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

...

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

Properties

type JSSwiperData = {
  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