BoxSlider React

React components for the BoxSlider library effects.

Installation

npm i --save @boxslider/react`

Available Components

Each slide effect has a matching React component. The documentation for the effectOptions prop can be found on the main plugin site. The documentation is linked for each option below.

• <CarouselSlider /> documentation
• <CubeSlider /> documentation
• <FadeSlider /> documentation
• <TileSlider /> documentation

Component props

Each component has optional props for the BoxSlider options and the effect options. In addition to these props an event handler for each slider event can be provided with the naming convention on<EventName>.

// Example using the core slider library
slider.addEventListener('pause', () => console.log('Slider paused'))

// Equivalent component prop
;<FadeSlider onPause={() => console.log('Slider paused')}>...</FadeSlider>

See the options for all available slider options and events for the available events.

Example usage

function doSomethingBefore(ev) {
  console.log(`About to show slide ${ev.nextIndex}`)
}

ReactDOM.render(
  <FadeSlider
    autoScroll
    speed={300}
    className="slider"
    timingFunction="ease-in"
    onBefore={doSomethingBefore}>
    <div>Slide one</div>
    <div>Slide two</div>
    <div>Slide three</div>
    <div>Slide four</div>
    <div>Slide five</div>
  </FadeSlider>,
  document.getElementById('root'),
)

sliderRef prop

To can gain access to the slider instance pass a sliderRef and the current value will be set once the component is mounted and the slider instance is initialised.

function Slider() {
  const sliderRef = useRef(null)

  return (
    <div>
      <CarouselSlider sliderRef={sliderRef}>
        <div>Slide one</div>
        <div>Slide two</div>
        <div>Slide three</div>
        <div>Slide four</div>
        <div>Slide five</div>
      </CarouselSlider>
      <button onClick={() => sliderRef.current?.prev()}>Previous slide</button>
      <button onClick={() => sliderRef.current?.next()}>Next slide</button>
    </div>
  )
}